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Preface 


HITML5 是 最 新 的 HTML 标准 。 尽 管 HTML5 到 目前 为 止 还 只 是 草案 ， 离 真正 的 规范 
还 有 相当 长 的 一 段 路 要 走 , 但 HTML5 已 经 引起 了 业内 的 广泛 兴趣 ,Google Chrome、Firefox、 
Opera、Safari 和 Internet Explorer 9 等 主流 浏览 器 都 已 经 支持 HTML5 技术 。HTML5 无 疑 
会 成 为 未 来 10 年 最 热门 的 互联 网 技术 。 

本 书 作 者 长 期 从 事 HTMLS5 网 页 设计 教学 与 应 用 开发 ， 在 长 期 的 工作 、 学 习 中 ， 积累 
了 丰富 经 验 和 教训 ， 能 够 了 解 在 学 习 编程 的 时 候 需要 什么 样 的 书 才 能 提高 HTML5 开发 能 
力 ， 以 最 少 的 时 间 投 入 得 到 最 快 的 实际 应 用 。 

本 书 分 为 基础 篇 和 实战 篇 ,基础 篇 包括 第 1 一 6 章 , 主要 讲解 HTMLS5 的 基础 知识 和 相 
关 新 技术 ， 如 JavaScript、Canvas API 画图 、CSS3 和 jQuery 及 其 使 用 技巧 ， 实 战 篇 包括 第 
7 一 19 章 ， 综 合 应 用 前 面 技 术 ， 开 发 经 典 的 大 家 耳熟能详 的 游戏 ， 比 如 推 箱子 、 黑 白 棋 、 
俄罗斯 方块 、 雷 电 飞机 游戏 、FlappyBird 游戏 、 中 国 象棋 、 两 人 麻将 和 21 点 扑克 牌 等 。 通 
过 本 书 读者 将 学 会 如 何 利用 HTML5 和 JavaScript、CSS3 制作 交互 式 游戏 、 平 台 类 游戏 ， 
学 会 网 页 游戏 设计 。 

本 书 特点 如 下 : 内 容 丰 富 、 全 面 ， 其 中 的 通用 代码 可 直接 应 用 于 一 般 的 游戏 。 每 款 游 
戏 实例 均 提 供 详细 的 设计 思路 、 关 键 技术 分 析 以 及 具体 的 解决 步骤 方案 。 每 一 个 游戏 实例 
都 是 活 的 、 实 用 的 HTMLS 编程 实例 。 

需要 说 明 的 是 ， 学 习 游 戏 编程 是 一 个 实践 的 过 程 ， 而 不 仅仅 是 看 书 、 看 资料 ， 亲 自动 
手 编写 、 调 试 程序 才 是 至 关 重 要 的 。 通 过 实际 的 编程 以 及 积极 的 思考 ， 读 者 可 以 很 快 地 掌 
握 很 多 的 编程 技术 ， 而 且 ， 在 编程 中 还 会 积累 许多 宝贵 的 编程 经 验 。 在 当前 的 软件 开发 环 
境 下 ， 这 种 编程 经 验 对 开发 者 尤其 显得 不 可 或 缺 。 

本 书 得 到 中 原 工 学 院 资助 ， 由 夏 敏捷 (中 原 工学 院 ) 主持 编写 ， 张 慎 武 编写 第 1 章 ， 
张 书 钦 编 写 第 2 章 ， 张 锦 歌 (河南 工业 大 学 ) 编写 第 3 一 5 章 ， 马 宗 梅 编写 第 14 章 ， 高 丽 
平 编写 第 16 章 ， 宋 宝 卫 〈 郑 州 轻工业 学 院 ) 编写 第 6 章 、 第 12 章 、 第 17 一 19 章 ， 其 余 章 
节 由 夏 敏 捷 编写 。 在 本 书 的 编写 过 程 中 ， 为 确保 内 容 的 正确 性 ， 我 们 参阅 了 很 多 资料 ， 并 
且 得 到 了 资深 Web 程序 员 的 支持 , 在 此 谨 向 他 们 表示 衷心 的 感谢 。 本 书 的 学 习 资 源 可 以 在 
清华 大 学 出 版 社 网 站 本 书页 面 检索 下 载 。 

由 于 编者 水 平 有 限 ， 书 中 难免 有 错 ， 敬 请 广大 读者 批评 指正 ， 在 此 表示 感谢 。 


夏 敏 捷 
2018 年 3 月 
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互联 网 上 的 应 用 程序 被 称 为 Web 应 用 程序 ，Web 应 用 程序 使 用 Web 文档 (网 页 ) 来 
表现 用 户 界面 ， 而 Web 文档 都 遵循 标准 HTML 格式 。HTML5 是 最 新 的 HTML 标准。 之 
前 的 版 本 HIML4.01 于 1999 年 发 布 。10 多 年 过 去 了 ,互联 网 已 经 发 生 了 翻天 覆 地 的 变化 。 
原 有 的 标准 已 经 不 能 满足 各 种 Web 应 用 程序 的 需求 。 本 章 就 和 读者 一 起 来 了 解 一 下 最 新 标 
准 的 HTMLS5 的 概貌 。 


HTML 基础 


?1.11 HTML 的 定义 


HTML 是 HyperText Markup Language〈 即 超 文 本 标记 语言 ) 的 缩写 ， 它 是 通过 嵌入 代 
码 或 标记 来 表明 文本 格式 的 国际 标准 。 用 它 编写 的 文件 扩展 名 是 .html 或 .htm， 这 种 网 页 文 
件 的 内 容 通常 是 静态 的 。 

HTML 中 包含 很 多 HTML 标记 (标签 Tag)， 它 们 可 以 被 Web 浏览 器 解释 ， 从 而 决定 
网 页 的 结构 和 显示 的 内 容 。 这 些 标记 通常 成 对 出 现 ， 例 如 <HIML> 和 </HTML> 就 是 常用 的 
标记 对 ， 语 法 格式 如 下 : 

< 标记 名 > 数据 </ 标 记名 > 

【 例 1-1】 一 个 使 用 基本 结构 标记 文档 的 HTML 文档 实例 firsthtml。 


<html> 

<head> 

<title>HTML 文件 标题 </title> 
</head> 

<body> 

<!-- HTML 文件 内 容 --> 
<p>this is a paragraph</p> 
<b>This text is bold</b> 
</body> 

</html> 


这 个 文件 的 第 一 个 标记 (Tag) 是 <html>， 这 个 标记 告诉 浏览 器 这 是 HTML 文件 的 头 。 
文件 的 最 后 一 个 标记 是 </html>， 表 示 HTML 文件 到 此 结束 。 

在 <head> 和 </head> 之 间 的 内 容 是 Head 信息 。Head 信息 是 不 显示 出 来 的 ,在 浏览 器 里 
看 不 到 。 但 是 这 并 不 表示 这 些 信息 没有 用 处 。 例 如 可 以 在 Head 信息 里 加 上 一 些 关键 词 ， 
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有 助 于 搜索 引擎 能 够 搜索 到 你 的 网 页 。 

在 <title> 和 </title> 之 间 的 内 容 是 这 个 文件 的 标题 。 可 以 在 浏览 器 最 顶端 的 标题 栏 看 到 
这 个 标题 。 

在 <body> 和 </body> 之 间 的 信息 是 正文 。 

<! 一 和 --> 是 HIML 文档 中 的 注释 符 ， 它 们 之 间 的 代码 不 会 被 解析 。 

在 <b> 和 </b> 之 间 的 文字 ， 用 粗 体 表 示 。<b>， 顾 名 思 义 ， 就 是 bold 的 意思 。 

HTML 文件 看 上 去 和 一 般 文本 类 似 , 但 是 它 比 一 般 文 本 多 了 标记 (Tag)， 例 如 <html>、 
<b> 等 ， 通 过 这 些 标记 〈Tag)， 告 诉 浏览 器 如 何 显示 这 个 文件 。 

实际 上 < 标记 名 > 数据 </ 标 记名 > 就 是 HIML 元 素 (HTML Elements)。 大 多 数 元 素 都 可 以 
嵌 套 ,例如 : 

<body> 

<p>this is a paragraph</p> 

</body> 


其 中 <body> 元 素 的 内 容 是 另 一 个 HTML 元 素 。HTML 文件 是 由 嵌 套 的 HTML 元 素 组 
成 的 。 








1990 年 ， 欧 洲 原 子 物 理 研 究 所 的 英国 科学 家 Tim Bemers-Lee 发 明了 WWW (World 
Wide Web)。 通 过 Web， 用 户 可 以 在 一 个 网 页 里 比较 直观 地 表示 出 互联 网 上 的 资源 。 因 此 ， 
Tim Berners-Lee 被 称 为 互联 网 之 父 。 

最 早 的 关于 HTML 的 公开 描述 是 由 Tim Bemers-Lee 于 1991 年 发 表 的 一 篇 名 为 (HTML 
标记 》 的 文章 ， 其 中 描述 了 18 个 元 素 ， 这 就 是 关于 HTML 的 最 简单 的 设计 。 其 中 的 11 个 
元 素 还 保留 在 HIML4 中 。 

1993 年 ，Internet 工程 任务 组 (Intemet Engineering Task Force，IETF) 发 布 了 第 1 部 
HTML 规范 建议 。1994 年 , IETF 成 立 了 HTML 工作 组 , 该 工作 组 于 1995 年 完成 了 HIML 
2.0 设计 ， 并 于 同年 发 布 了 HTML 3.0， 对 HIML 2.0 进行 了 扩展 。 

HIML 4.01 发 布 于 1999 年 ， 直 至 现在 仍然 有 大 量 的 网 页 是 基于 HTML 4.01 的 ， 它 的 
应 用 周期 超过 10 年 ， 因 此 是 到 目前 为 止 ， 影 响 最 广泛 的 HIML 版 本 。 

2004 年 ， 超 文本 应 用 技术 工作 组 (Web Hypertext Application Technology Working 
Group，WHATWG) 开始 研发 HTML5。2007 年 , 万 维 网 联盟 (World Wide Web Consortium， 
W3C) 接受 了 HIML5 草案 ， 并 成 立 了 专门 的 工作 团队 ， 并 于 2008 年 1 月 发 布 了 第 1 个 
HIML5 的 正式 草案 。 

2010 年 ， 时 任 苹果 公司 CEO 的 乔布斯 发 表 了 一 篇 名 为 《对 Flash 的 思考 》 的 文章 ， 指 
出 随 着 HIMLS 的 完善 和 推广 , 以 后 再 观看 视频 等 多 媒体 时 就 不 再 依靠 Flash 插件 了 。 这 引 
起 了 主流 媒体 对 HTML5 的 兴趣 。 

目前 HIMLS 的 标准 草案 已 进入 了 W3C 制定 标准 5 大 程序 的 第 1 步 。 预 期 要 到 2022 
年 才 会 成 为 W3C 推荐 标准 。HTML5 无 疑 会 成 为 未 来 10 年 最 热门 的 互联 网 技术 。 
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HTML4 基础 


HTML 文件 是 标准 的 ASCII 文件 ， 它 是 加 入 了 许多 被 称 为 标记 〈Tag) 的 特殊 字符 串 
的 普通 文本 文件 。 组 成 HIML 文件 的 标记 有 许多 种 ， 这 些 标记 用 于 组 织 页 面 的 布局 和 输出 
样式 。HTML 中 的 绝 大 多 数 标记 是 “容器 ” 即 它 分 起 始 标记 和 结尾 标记 两 部 分 。 在 起 始 
标记 和 结尾 标记 中 间 的 部 分 是 标记 体 。 每 一 个 标记 都 有 名 称 和 可 供 选 择 使 用 的 属性 ， 标 记 
的 名 称 和 属性 都 在 起 始 标记 内 标明 。 

例如 , BODY 标记 用 于 定义 网 页 中 所 有 将 被 浏览 器 显示 的 内 容 。 下 面 的 HIML 代码 将 
在 浏览 器 中 显示 两 行文 字 , 第 一 行为 “demo”， 以 标题 2 的 格式 显示 。 第 二 行为 “This is my 
first HTML file.”， 以 普通 段落 文字 显示 。 


<BODY background="flower.gif"> 
<H2> demo </H2> 

<P>This is my first HTML file. </P> 
</BODY> 


第 1 行 是 BODY 标记 的 起 始 标记 ， 它 标明 BODY 标记 从 此 开始 。 因 为 所 有 的 标记 都 
具有 相同 的 结构 。 标 记 可 以 出 现 属性 ， 例 如 background 属性 名 。 一 个 标记 可 以 有 多 个 属 
性 ， 各 个 属性 之 间 用 空格 分 开 。 属 性 及 其 属性 值 不 区 分 大 小 写 。 本 例 中 的 属性 background 
指定 用 什么 图 片 来 填充 背景 。 

第 2 行 和 第 3 行 是 BODY 标记 的 标记 体 , 此 处 的 两 行内 容 指定 在 浏览 器 中 分 别 以 不 同 
的 格式 显示 两 行文 字 “demo” 和 “This is my first HTML file.”。 

最 后 一 行 < BODY> 是 BODY 标记 的 结尾 标记 ， 结 尾 标记 与 起 始 标记 相对 应 ， 它 的 开 
始 符 是 “</”。 大 多 数 标记 的 首尾 标记 必须 成 对 出 现 ， 也 有 起 始 标记 必须 出 现 而 结尾 标记 是 
可 选 的 ， 例 如 <P>、<OPTION> 等 标记 ; 或 者 只 有 起 始 标记 而 禁止 结尾 标记 的 元 素 ， 例 如 
<INPUT>、<IMG> 等 标记 。 

从 上 面 的 例子 可 以 看 出 ， 一 个 标记 的 标记 体 中 可 以 有 另外 的 标记 ， 如 上 例 中 第 2 行 的 
标题 标记 <H2>…</H2> 和 第 3 行 的 分 段 标记 <P>。 实 际 上 ，HTML 文件 仅 由 一 个 HIML 标 
记 组 成 ， 即 文件 以 <HTML> 开 始 ， 以 </HTMIL> 结 尾 ， 两 个 标记 中 间 都 是 HTML 的 标记 体 。 

HTML 的 标记 体 由 两 大 部 分 组 成 ， 即 头 标记 <HEAD>…</HEAD> 和 体 标记 <BODY>… 
</BODY>。 头 标记 和 体 标 记 的 标记 体 又 可 由 其 他 的 标记 、 文 本 及 注释 组 成 ， 也 就 是 说 ， 一 
个 HIML 文件 应 具有 下 面 的 基本 结构 : 


<HTML> ”HTML 文件 开始 
<HEAD> ” 头 标 记 开 始 
头 标记 体 

</HEAD> 头 标记 结束 
<BODY> ” 体 标记 开始 
体 标记 体 

</BODY> 体 标记 结束 
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</HTML> HTML 文件 结束 


需要 说 明 的 是 ，HTML 文件 中 ， 有 些 标记 只 能 出 现在 头 标记 中 ， 其 余 绝 大 多 数 标记 只 
能 出 现在 体 标记 中 。 在 头 标记 中 的 标记 表示 的 是 该 HTML 文件 的 一 般 信息 ， 比 如 文件 名 称 
以 及 是 否 可 检索 等 。 这 些 标记 书写 的 次 序 是 无 关 紧 要 的 ， 它 们 只 表明 有 没有 该 属性 。 但 出 
现在 体 标记 中 的 标记 是 次 序 敏感 的 ， 即 改变 标记 的 书写 次 序 会 改变 该 段 信 息 在 浏览 器 中 的 
输出 形式 。 

注意 : 目前 HTML 的 标记 (Tag) 不 区 分 大 小 写 ， 即 <title> 和 <TITLE> 或 者 <TiTIE> 是 
一 样 的。 但 最 好 是 用 小 写 标记 (Tag)， 因 为 W3C 在 HTML 中 推荐 使 用 小 写 。 





1. 文件 标题 标记 <TITLE> 

TITLE 标记 标明 该 HTML 文件 的 标题 ,是 对 文件 内 容 的 概括 。 一 个 好 的 标题 应 该 能 使 
浏览 者 从 中 判断 出 该 文件 的 大 概 内 容 。 文 件 的 标题 一 般 不 会 显示 在 文本 窗口 中 ， 而 是 以 窗 
口 的 名 称 显示 出 来 。TITLE 标记 的 格式 为 : 


<TITLE> 文 件 标题 </TITLE> 

2. 标题 标记 <Hn> 和 段落 标记 <P> 

标题 标记 有 6 种 ， 分 别 为 HL, H2.…,H6， 用 于 表示 文章 中 的 各 种 标题 。 标 题 号 越 小 ， 
字体 越 大 ， 因 此 ，<H1> 是 最 大 的 标题 ，<H6> 是 最 小 的 标题 ， 例 如 : 


<H1> 一 级 标题 </H1> 
<H2> 二 级 标题 </H2> 
<H3> 三 级 标题 </H3> 
<H4> 四 级 标题 </H4> 


如 果 要 设置 正文 段落 ， 则 使 用 <P>…</P>， 中 间 存 放 文字 、 图 像 和 超 链接 等 ， 例 如 : 


<P> 第 一 个 段落 的 文字 </P> 
<P> 第 二 个 段落 的 文字 </P> 


如 果 要 强调 某 个 单词 ， 可 以 使 用 粗 体 字 标 记 <B>…</B>。 
段落 <P> 和 标题 <Hn> 具 有 对 齐 属性 align， 其 值 left 表示 标题 居 左 ，center 表示 标题 居 
right 表示 标题 居 右 。 例 如 ， 设 置 二 级 标题 ， 居 中 效果 : 


<H2 align="center">Chapter 2 </H2> 


3. 字体 标记 <FONT> 
HTML 处 理 字体 的 标记 ,可 以 用 来 定义 文字 的 字体 (face)、 大 小 (size) 和 颜色 (colon) 。 
FONT 标记 的 格式 为 : 


<FONT> 具 体 文字 </FONT> 
例如 ， 设 置 字体 为 隶书 ， 字 号 为 4 号 ， 颜色 为 红色 ， 文 字 为 “中 原 工 学 院 ”: 


<FONT face=" 隶 书 " size=4 color="red"> 中 原 工学 院 </FONT> 
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4. 超 链 接 标记 <A> 

超 链接 〈Hyperlink) 是 HTML 中 的 一 个 重要 部 分 。 它 指向 用 URL 来 唯一 标识 的 另 一 
个 Web 信息 页 。 

HTML 中 的 一 个 超 链接 由 两 部 分 组 成 : 一 部 分 是 可 被 显示 在 Web 浏览 器 中 的 超 链 接 文 
本 及 图 像 ， 当 用 户 单 击 它 时 ， 就 触发 了 此 超 链 接 ， 另 一 部 分 就 是 用 以 描述 当 超 链接 被 触发 
后 要 连接 到 何 处 的 URL 信息 。 因 而 超 链接 标记 的 格式 为 ; 


<A HREEF=“URI 信息 ”> 超 链接 文本 及 图 像 </R> 


其 中 超 链接 文本 被 浏览 器 用 一 种 特殊 颜色 并 带 下 画 线 的 字体 醒目 地 显示 出 来 ， 当 鼠标 
进入 其 区 域 时 指针 会 变 成 手 的 形状 ， 表 示 此 处 可 以 被 触发 。 属 性 HREF 表明 超 链接 被 触发 
后 所 指向 的 URL。 例 如 : 


<A HREF="http://www.cqi.com.cn/person/szj98/index.htm"> 我 的 主页 </A> 


在 HIML 中 还 可 使 用 相对 URL 来 代替 绝对 URL .例如 若 指 向 的 另 一 HTML 文件 在 同 
一 目录 下 ， 只 需 简单 地 写 为 : 


<A HREF="self.htm"> 自 我 介绍 </A> 
如 要 指向 上 两 级 目录 下 的 文件 ， 可 以 这 样 写 : 
<A HREF="../../topic.htm"> 返 回 到 顶级 </A> 


通常 超 链 接 指向 一 个 文件 , 若 要 指向 一 个 文件 内 的 某 一 特定 位 置 , 就 要 用 到 超 链 接 名 ， 
其 格式 如 下 : 

<A NAME=" 超 链接 名 "> 相关 内 容 </A> 

例如 ， 在 一 个 文件 中 有 一 部 分 内 容 是 说 明 ， 可 以 先 在 说 明 标 题 上 定义 一 个 超 链接 名 : 

<A NAME=" 说 明 "> 说 明 部 分 </A> 

这 样 ， 就 可 以 在 同一 文件 的 其 他 处 创建 一 个 超 链接 来 指向 说 明 部 分 : 

<A HREF="# 说 明 "> 说 明 </A> 

当 用 户 一 旦 触发 超 链接 ， 就 显示 其 内 容 。 

5. 图 像 标记 <IMG> 

目前 有 以 下 几 种 图 像 的 格式 能 被 Web 浏览 器 直接 解释 : GIF、JPEG、BMP 等 。 对 于 
段落 中 的 图 像 ， 还 可 以 利用 ALIGN 属性 定义 图 与 文本 行 的 对 齐 方式 ， 其 属性 值 可 取 TOP 
(与 文本 行 顶部 对 齐 )、MIDDLE (中 间 对 齐 )、BOTTOM (底部 对 齐 ， 默认 值 )、LEFT (将 


此 图 显示 在 窗口 左 方 )、RIGHT (将 此 图 显示 在 窗口 右 方 )。 
例如 ， 用 <IMG> 来 表示 网 页 中 的 一 幅 图 像 : 


<H2><IMG ALIGN=MIDDLE SRC="glow.gif"> 蓝 色 天 空 </H2> 


例如 ， 在 网 页 中 插入 一 个 名 字 为 starjpg 的 图 像 ， 图 像 宽度 为 100 像素 ， 高 为 120 
像素 : 
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<IMG SRC="star.jpg" WIDTH="100" HEIGHT="120"> 
还 可 以 在 图 像 上 设置 超 链接 ， 其 标记 为 <A>…</A>。 
<R HREF="http://www.zzti.edu.cn"><IMG SRC=" 中 工 .jpg"></A> 


Web 浏览 器 在 具有 超 链接 的 图 像 四 周 画 一 个 边框 ， 表 示 可 以 被 触发 。 若 想 去 掉 这 个 框 
只 需 在 <IMG> 中 加 上 属性 BORDER=0 就 可 以 了 。 如 果 不 满意 图 像 的 原始 尺寸 ， 可 以 用 属 
性 WIDTH 和 HEIGHT 重新 定义 图 像 的 宽度 和 高 度 ， 属 性 值 为 用 整数 表示 的 屏幕 像素 点 的 
个 数 。 

6. 声音 和 视频 标记 

Web 浏览 器 自身 不 能 解释 声音 和 视频 文件 ， 但 它 能 通过 其 他 辅助 工具 的 帮助 来 播放 声 
音 和 视频 文件 。 一 般 声音 文件 带 有 WAV、SND 等 扩展 名 ， 而 视频 文件 带 有 AVI、MPG 等 
文件 扩展 名 。 要 播放 这 些 文件 , 可 把 这 些 文件 作为 一 个 超 链 接 中 的 URL 信息 。 当 用 户 触发 
这 一 超 链 接 时 ，Web 浏览 器 发 现 自己 无 法 解释 这 类 文件 ， 就 在 辅助 工具 表 中 启动 相应 的 程 
序 来 播放 它们 。 例 如 : 


<H2><A HREF="cinema.avi"> 这 是 一 段 电影 </A></H2> 


用 户 触 发 这 一 超 链接 后 ，Web 浏览 器 立即 启动 默认 的 网 络 视频 播放 工具 程序 (如 
Mplayer 程序 ) 来 播放 此 文件 。 

7. 框架 标记 <Frame> 

使 用 框架 可 以 在 浏览 器 窗口 同时 显示 多 个 网 页 ,每 个 框架 Frame 里 可 以 设 定 一 个 网 页 ， 
各 个 Frame 里 的 网 页 相互 独立 。 例 如 : 


<frameset cols="25%,75%"> 
<frame src="a.htm"> 
<frame src="b.htm"> 
</frameset> 


框架 集 标记 <frameset></frameset> 决 定 如 何 划 分 框架 Frame。<frameset> 有 cols 属性 和 
rows 属性 。 使 用 cols 属性 ， 表 示 按 列 划分 Frame; 使 用 rows 属性 ， 表 示 按 行 划分 Frame。 
示例 中 将 浏览 器 窗口 分 成 两 列 ， 第 一 列 25%， 表 示 第 一 列 的 宽度 是 窗口 宽度 的 25%; 第 二 
列 75%, 表示 第 二 列 的 宽度 是 窗口 宽度 的 75%。 第 一 列 中 显示 a.htm, 第 二 列 中 显示 b.htm。 
<frame> 里 有 src 属性 ，src 值 就 是 网 页 的 路 径 和 文件 名 。 

8. 表格 标记 

在 HTML 文档 中 ， 表 格 是 通过 <table>、<th>、<t>、<td> 标 记 来 完成 的 ， 如 表 1-1 所 示 。 


表 1-1 表格 标记 说 明 





标记 描述 

<table>.….</table> ”用 于 定义 一 个 表格 的 开始 和 结束 

<th>...</th> 定义 表 头 单元 格 。 表 格 中 的 文字 将 以 粗 体 显示 ， 在 表格 中 也 可 以 不 用 此 标记 ，<th> 
标记 必须 放 在 <tr> 标 记 内 

<tr>...</tr> 定义 行 的 标记 ， 行 标记 内 可 以 建立 多 组 由 <td> 或 <th> 标 记 所 定义 的 单元 格 


<td>...</td> 定义 单元 格 标记 ， 一 组 <td> 标 记 将 建立 一 个 单元 格 ，<td> 标 记 必 须 放 在 <tr> 标 记 内 
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在 一 个 最 基本 的 表格 中 ， 必 须 包含 一 组 <table> 标 记 ， 一 组 <tr> 标 记 和 一 组 <td> 标 记 或 
<th>。 表 格 标记 <table> 有 很 多 属性 ， 最 常用 的 属性 见 表 1-2。 


表 1-2 表格 标记 <table> 的 常用 属性 








属性 描述 属性 描述 
width 表格 的 宽度 bordercolorlight 表格 边框 明亮 部 分 的 颜色 
height 表格 的 高 度 bordercolordark 表格 边框 昏暗 部 分 的 颜色 
align 表格 在 页 面 的 水 平 摆 放 的 位 置 cellspacing 单元 格 之 间 的 间距 
bsgcolor 表格 的 背景 颜色 cellpadding 单元 格 内 容 与 单元 格 边界 之 
border 表格 边框 的 宽度 〈 以 像素 为 单位 ) 间 的 空白 距离 的 大 小 
bordercolor 表格 边框 颜色 

【 例 1-2】 一 个 简单 的 表格 实例 。 

<HTML> 

<HEAD> 

<TITLE> 一 个 简单 的 表格 </TITLE> 

</HEAD> 

<BODY> 

<center> 

<tableborder=1 bordercolor="#006803" align="center"cellspacing="0" > 

<tr> 


<td> 第 1 行 中 的 第 1 列 </td> 
<td> 第 1 行 中 的 第 2 列 </td> 
<td> 第 1 行 中 的 第 3 列 </td> 
</tr> 

<tr> 

<td> 第 2 行 中 的 第 1 列 </td> 
<td> 第 2 行 中 的 第 2 列 </td> 
<td> 第 2 行 中 的 第 3 列 </td> 
<XEFE> 

</table> 

</center> 

</BODY> 

</HTML> 


浏览 网 页 效果 如 图 1-1 所 示 。 








图 1-1 表格 示例 
标记 <th>、<tr>、<td> 也 有 很 多 属性 ， 用 来 控制 行 和 单元 格 的 属性 ， 限 于 篇 幅 这 里 就 
不 再 介绍 了 。 
9. 分 区 标记 


<div> 标 记 可 以 定义 文档 中 的 分 区 或 节 (division/section)， 可 以 把 文档 分 割 为 独立 的 、 
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不 同 的 部 分 。 在 HIML4 中 ，<div> 标 记 对 涉及 网 页 布局 很 重要 。 
【 例 1-3】 使 用 <div> 标 记 定 义 3 个 分 区 ， 背 景色 分 别 为 红 、 绿 、 蓝 ， 代 码 如 下 : 


<div style="background-color:#FF0000"> 
<h3> 标 题 1</h3> 

<p> 正 文 1</p> 

</div> 

<div style="background-color:#00FF00"> 
<h3> 标 题 2</h3> 

<p> 正 文 2</p> 

</div> 

<div style="background-color:yellow"> 
<h3> 标 题 3</h3> 

<p> 正 文 3</p> 

</div> 


style 属性 用 于 指定 div 元 素 的 CSS 样式 。background-color 属性 用 于 指定 元 素 的 背景 
色 。CSS 技术 后 面 章 节 中 会 介绍 ， 浏 览 网 页 效果 如 图 1-2 所 示 。 


图 1-2 div 元 素 示例 


10. 其 他 常用 标记 
HTML4 还 有 许多 标记 ， 这 里 仅仅 用 表 1-3 列 出 它们 的 作用 ， 不 再 举例 说 明 。 


表 1-3 其 他 常用 标记 

标记 描述 

<br> <br> 标 记 是 HIML 中 的 换行 符 

< pre > <pre > 标记 用 于 定义 预 格式 化 的 文本 。< pre > 中 的 文本 会 以 等 宽 字体 显示 ， 并 保留 空格 和 
换行 符 。<pre> 标 记 通常 可 以 用 来 显示 源 代码 

<span > <span > 标记 可 以 用 来 组 合 文档 中 的 行内 元 素 。 它 可 以 在 行内 定义 一 个 区 域 ， 也 就 是 一 行 
内 可 以 被 <span> 划 分 成 好 几 个 区 域 ， 从 而 实现 某 种 特定 效果 

<li> 定义 列表 项 目的 标记 ， 可 以 用 于 有 序列 表 <ol> 标 记 和 无 序列 表 <ul> 标 记 内 

<form> 定义 表单 


HTML5 的 新 特性 


HTML 5 是 近 十 年 来 Web 开发 标准 最 巨大 的 飞跃 。 与 以 前 的 版 本 不 同 ，HIML 5 并 非 
仅仅 用 来 表示 Web 内 容 ， 它 的 新 使 命 是 将 Web 带 入 一 个 成 熟 的 应 用 平台 ， 在 HIML 5 平 





第 1 章 HTML5 概述 


台 上 ， 视 频 、 音 频 、 图 像 、 动 画 ， 以 及 同 计算 机 的 交互 都 被 标准 化 。 

HTML5 在 以 前 浏览 器 发 展 的 基础 上 对 标记 进行 了 简化 。 另 外 ，HTMLS 中 对 标记 从 语 
法 上 也 进行 了 分 类 : 

(1) 不 允许 写 结束 符 的 标记 : area、basebr、col、command、embed、hr、img、input、 
keygen、 link、 meta、 param、 source、track、wbr。 

(2) 可 以 省 略 结束 符 的 标记 : li、dt、dd、p、rt、optgroup、option、colgroup、thread、 
tbody、 tr、td、th。 

(3) 可 以 完全 省 略 的 标记 : html、head、body、colgroup、tbody。 

在 HTML 4 的 基础 上 HIMLS5 新 增 了 很 多 标记 ， 下 面 列 举 部 分 新 增 标 记 ， 如 表 1-4 所 示 。 


表 1-4 HTMLS5 新 增 标记 








标记 功能 说 明 

<article> 定义 文章 或 网 页 中 的 主要 内 容 
<aside> 定义 页 面 内 容 部 分 的 侧 边栏 
<audio> 定义 音频 内 容 

<canvas> 定义 图 布 

<command> 定义 一 个 命令 按钮 

<datalist> 定义 一 个 下 拉 列 表 

<details> 定义 一 个 元 素 的 详细 内 容 
<dialog> 定义 一 个 对 话 框 (会 话 框 ) 
<embed> 定义 外 部 的 可 交互 的 内 容 或 插件 
<figure> 定义 一 组 媒体 内 容 以 及 它们 的 标题 
<footer> 定义 一 个 页 面 或 一 个 区 域 的 底部 
<header> 定义 一 个 页 面 或 一 个 区 域 的 头 部 
<hgroup> 定义 文件 中 一 个 区 块 的 相关 信息 
<keygen> 定义 表单 里 一 个 生成 的 键 值 
<mark> 定义 有 标记 的 文本 

<meter> 标记 定义 

<nav> 定义 导航 链接 

<output> 定义 一 些 输 出 类 型 

<progress> 定义 任务 的 过 程 

<ruby> 标记 定义 

<section> 定义 一 个 区 域 

<source> 定义 媒体 资源 

<time> 定义 一 个 日 期 /时 间 

<video> 显示 一 个 视频 





1. 简化 的 文档 类 型 

<!DOCTYPE> 声 明 位 于 HTML 文档 中 的 最 前 面 的 位 置 ， 它 位 于 <html> 标 签 之 前 。 该 标 
签 告知 浏览 器 文档 所 使 用 的 HTML 或 XHTML 规范 。 在 HTML4 中 ，<!DOCTYPE> 标 签 
可 以 声明 三 种 DTD 类 型 ， 分 别 表示 严格 版 本 (Strict)、 过 渡 版 本 (Transitional) 和 基于 框 
架 (Frameset) 的 HIML 文档 。 

HTMLS5 只 支持 HTML 一 种 文档 类 型 。 定 义 代码 如 下 : 
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<!DOCTYPE HTML> 


之 所 以 这 么 简单 ， 是 因为 HTML5 不 再 是 SGML (Standard Generalized Markup 
Language， 标 准 通用 标记 语言 ， 一 种 定义 电子 文档 结构 和 描述 其 内 容 的 国际 标准 语言 ， 是 
所 有 电子 文档 标记 语言 的 起 源 ) 的 一 部 分 ， 而 是 独立 的 标记 语言 。 这 样 ， 设 计 HTML 文档 
时 就 不 需要 考虑 文档 类 型 了 。 

2. 字符 集 

如 果 要 正确 地 显示 HTML 页 面 ， 浏 览 器 必须 知道 使 用 何 种 字符 集 。HTML4 的 字符 集 
包括 ASCII、ISO-8859-1、Unicode 等 很 多 类 型 。 

HTML5 的 字符 集 也 得 到 了 简化 ， 只 需要 使 用 UTF-8 即 可 ,使 用 一 个 meta 标记 就 可 以 
指定 HIML5 的 字符 集 ， 代 码 如 下 : 


<meta charset="UTF-8"> 


?1.3.2 HTML5 的 新 结构 


HTMLS5 的 设计 者 们 认为 网 页 应 该 像 XML 文档 和 图 书 一 样 有 结构 。 通常， 网 页 中 有 导 
航 、 网 页 体内 容 、 工 具 栏 、 页 眉 和 页 脚 等 结构 。HTMLS5 中 增加 了 一 些 新 的 标记 以 实现 这 
些 网 页 结构 ， 这 些 新 标记 及 其 定义 的 网 页 布局 如 图 1-3 所 示 。 下 面 列 出 网 页 布局 的 相关 标记 : 
。 <section> 标 记 用 于 定义 文档 中 的 区 段 , 例如 章节 、 页 眉 、 页 脚 或 文档 中 的 其 他 部 分 。 
。 <header> 标 记 用 于 定义 文档 的 页 届 〈 介 绍 信息 )。 
。 <footer> 标 记 用 于 定义 区 段 (section) 或 文档 的 页 脚 。 通 常 ， 该 元 素 包含 作者 的 姓 
名 、 文 档 的 创作 日 期 或 者 联系 方式 等 信息 。 
。 <nav> 标 记 用 于 定义 导航 链接 。 
。 <article> 标 记 用 于 定义 文章 或 网 页 中 的 主要 内 容 。 
。 <aside> 标 记 用 于 定义 主要 内 容 之 外 的 其 他 内 容 。 
HIML5 中 用 独立 的 标记 代表 特定 的 功能 , 例如 <header> 表 示 头 部 , <nav> 表 示 导 航 ， 
这 样 代码 变 得 非常 有 语义 且 容 易 理 解 ， 对 于 搜索 引擎 来 说 ， 更 容易 找到 相关 内 容 。 





图 1-3 HTMLS5 网 页 布局 示例 


?1.3.3 支持 本 地 存储 


HIML5 本 地 存储 类 似 于 cookies， 但 它 支持 存储 的 数据 量 更 大 ， 并 且 提 供 了 一 个 本 地 
数据 库 引擎 ， 从 而 使 保持 和 获取 数据 更 加 容易 。 这 个 特点 可 以 很 好 地 将 数据 分 发 给 用 户 ， 
缓解 与 服务 器 的 连接 压力 。 另 外 可 以 使 用 JavaScript 从 本 地 Web 页 面 中 访问 本 地 数据 库 ， 
这 意味 着 用 户 可 以 将 网 页 保存 到 本 地 ， 当 从 公司 回 到 家 里 不 用 连接 互联 网 就 能 打开 。 

? 1.3.4 全 新 的 表单 设计 


HTML5 支持 HIML4 中 定义 的 所 有 标准 输入 控件 ， 而 且 增 加 了 新 输入 控件 ， 从 而 使 
HIML5 实现 了 全 新 的 表单 设计 。 例 如 时 间 选 择 器 控件 , 以 后 选择 时 间 就 不 要 使 用 JavaScript 
插件 了 ， 直 接 使 用 type="date" 属 性 即 可 。 


<form> 
选择 日 期 : <input type="date" value="2017-01-04" /> 
</form> 


在 支持 的 浏览 器 〈 如 谷歌 浏览 器 ) 下 ， 就 有 图 1-4 所 示 效 果 。 
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41.3.5.. 强 大 的 绘图 功能 “. 


HTML4 几乎 没有 绘图 的 功能 , 通常 只 能 显示 已 有 的 图 片 ; 而 HIMLS 则 集成 了 强大 的 
绘图 功能 。 在 HTML5 中 可 以 通过 下 面 的 方法 进行 绘图 : 

。 使 用 Canvas API 动态 地 绘制 各 种 效果 精美 的 图 形 ; 

。 绘制 可 伸缩 的 矢量 图 形 (SVG)。 

借助 HTMLS5 的 绘图 功能 ， 既 可 以 美化 网 页 界面 ， 也 可 以 实现 专业 人 士 的 绘图 需求 。 
本 书 将 在 第 5 章 介绍 使 用 Canvas API 画图 的 方法 ， 游 戏 开 发 中 主要 使 用 Canvas API 画图 
来 实现 游戏 界面 。 

【 例 1-4】 使 用 Canvas API 画图 实现 绘制 坦克 图 案 。 

<!DOCTYPE html> 

<html> 

<head> 


<meta charset="utf-8"/> 
</head> 
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<body> 
<h1>htm15- 坦 克 大 战 </h1> 
<! 一 -坦克 大 战 的 战场 --> 
<canvas id="tankMap" width="400px" height="300px" style="background-color: 
black"></canvas> 
<script type="text/javascript"> 
// 得 到 画布 
Var canvasl = document .getElementById ("tankMap"); 


// 定 义 一 个 位 置 变 量 


Var herox = 80; Var heroY = 80; 
// 得 到 绘图 上 下 文 

Var cxt = canvasl.getContext ("2d"); 
// 设 置 颜色 

cxt .fillstyle="#BA9658"; 

// 画 左边 的 矩形 

cxt .fil1Rect (heroX,heroY,5,30) 7 

// 画 右边 的 矩形 

cxt .fillRect (heroX+17, heroY, 5, 30); 
// 画 中 间 的 矩形 

cxt.fillRect (heroX+6,heroY+5,10,20) 7 
// 画 出 坦克 的 盖子 


cxt .fillStyle="#FEF26E"; 
CXt .arc (heroX+1ll,heroY+15,5,0,360,true) 
cxt. F111 (0 
// 画 出 炮 简 
cxt .strokestyle="#FEF26E"; 
cxt.lineWwidth=1 .5; 
cxt .beginPath () 7 
CXt .moveTo (heroX+11,heroY+15) 
cxt.lineTo (heroX+11l,heroY) 7 
cxt.closePath(); 
cxt.stroke(); 

</script> 

</body> 

</html> 


浏览 网 页 效果 如 图 1-5 所 示 。 


EE 
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图 1-5 HIML5 绘制 坦克 图 案 


?1.3.6 ”获取 地 理 位 置信 息 


越 来 越 多 的 Web 应 用 需要 获取 地 理 位 置信 息 ， 例 如 在 显示 地 图 时 标注 自己 的 当前 位 
置 。 在 HTML4 中 ， 获 取 用 户 的 地 理 位 置信 息 需 要 借助 第 三 方 地 址 数据 库 或 专业 的 开发 包 
(例如 Google Gears API)。HTMLS5 新 增 了 Geolocation API 规范 , 可 以 通过 浏览 器 获取 用 户 
的 地 理 位 置 ， 这 无 疑 给 有 相关 需求 的 用 户 提供 了 很 大 的 方便 。 

【 例 1-5】 获得 用 户 的 位 置信 息 。 


<!DOCTYPE html> 

<html> 

<body> 

<p id="demo"> 单 击 这 个 按钮 ， 获 得 您 的 坐标 : </p> 
<button onclick="getLocation()"> 试 一 下 </button> 
<script> 





Var x=document .getElementById ("demo"); 
function getLocation() 
{ 
if (navigator.geolocation) // 检 测 是 否 支 持 地 理 定位 
1 
navigator.geolocation.getCurrentPosition (showPosition); 
// 支 持 则 运行 getcurrentPosition() 方 法 
} 
else{x.innerHTML=" 这 个 浏览 器 不 支持 地 理 定位 ."; } 
’ 
function showPosition (position) // 获 得 并 显示 经 度 和 纬度 
i 
x.innerHTML=" 纬 度 Latitude: " + position.coords.latitude + 
"<br /> 经 度 Longitude: " + position.coords.longitude; 
i 
</script> 
</body> 
</html> 


如 果 getCurrentPosition() 运 行 成 功 ， 则 向 参数 showPosition 返回 一 个 coordinates 对 象 。 
showPositionO) 函 数 获得 并 显示 经 度 和 纬度 。 

上 面 的 例子 是 一 个 非常 基础 的 地 理 定位 脚本 ， 不 含 错误 处 理 。 

如 需 在 地 图 中 显示 结果 ， 则 需要 访问 可 使 用 经 纬度 的 地 图 服务 ， 例 如 谷歌 地 图 或 百度 
地 图 ， 这 里 使 用 百度 地 图 来 演示 。 


<!DOCTYPE html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title> 地 理 位 置 测试 </title> 

<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3"> 
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</script> 
<script type="text/javascript" src="http://developer.baidu.com/map/jsdemo/ 
demo/Vconvertor .js"></script> 
<script type="text/javascript"> 
var map, gpsPoint,baiduPoint, gpsAddress,baiduAddress; 
function getLocation() { 
// 根 据 IP 获取 城市 
Var myCity = new BMap.LocalCity(); 
myCity.get (getCityBYIP) 7 
// 获 取 GPS 坐标 
if (navigator.geolocation) { 
navigator.geolocation.getCurrentPosition (showMap, handleError, 
{ enableHighAccuracy: true, maximumAge: 1000 }); 
} else { 


alert ("您 的 浏览 器 不 支持 使 用 HTML 5 来 获取 地 理 位 置 服务 ") ; 


} 
function showMap(value) { 
var longitude = value.coords.1longitude; 
var latitude = value.coords.latitude; 
map = new BMap.Map ("map"); 
alert ("坐标 经 度 为 : ”+ longitude + "， 纬 度 为 : " +latitude ); 
gpsPoint = new BMap.Point (longitude, latitude); / /创建 点 坐标 
map.centerAndZzoom (gpsPoint, 15); 
// 根 据 坐标 逆 解 析 地 址 
Var geoc = new BMap.Geocoder (); 
geoc .getLocation (gpsPoint, getCityByCoordinate); 
} 
function getCityByCoordinate(rs) { 
gpsAddress = rs.addressComponents; 
var address = "GPS 标注 : " + gpsAddress.province + ","+gpsAddress. 
city + "," + gpsAddress.district + "," + gpsAddress.street + "," 
+ gpsAddress.streetNumber; 
var marker = new BMap.Marker (gpsPoint); // 创 建 标注 


map.addoverlay (marker); // 将 标注 添加 到 地 图 中 
var labelgps = new BMap.Label (address, { offset: new BMap.Size(20, 
=10) Fy 


marker.setLabel (labelgps); // 添 加 GPS 标注 
1 
// 根 据 IP 获取 城市 
function getCityBYIP(rs) { 
Var cityName = rs.name; 
alert ("根据 IP 定位 您 所 在 的 城市 为 :" + cityName); 


} 
function handleError(value) { 


Switch (value.code) { 
case 1: 
alert ("位 置 服务 被 拒绝 "); break; 
Case 2: 
alert ("暂时 获取 不 到 位 置信 息 "); break; 
Case 3: 
alert ("获取 信息 超时 ") ; break; 
case 4: 
alert ("未 知 错误 "); break; 


} 

function init() { 
getLocation () 

} 

window.onload = init; 














</script> 
</head> 
<body> 
<div id="map" style="width:600px;height:600px;"></div> 
</body> 
</html> 
HTML5 的 地 理 位 置 特性 可 以 返回 网 页 访问 者 的 地 理 位 置 ,浏览 网 页 效果 如 图 1-6 所 示 。 
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图 1-6 返回 网 页 访问 者 的 地 理 位 置 


? 1 3.7. .支持 多 媒体 功 | 能 eveoeesseoeeoseeoseoseoseoseoyseoseyrotseoseyeeoseoseoseoseovsetseyeeysetseteestesseosesseoeeoresteoresteereorie。 


HIML4 在 播放 音频 和 视频 时 都 需要 借助 Flash 等 第 三 方 插件 。 而 HIMLS 5 新 增 了 
<audio> 和 <video> 元 素 ， 可 以 不 依赖 任何 插件 地 播放 音频 和 视频 ， 以 后 用 户 就 不 需要 安装 
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和 升级 Flash 插件 了 ， 这 当然 更 方便 了 。 
【 例 1-6】 播放 视频 实例 。 


<!DOCTYPE HTML> 

<html> 

<body> 

<video src="movie.avi" controls="controls"> 
your browser does not support the video tag 
</video> 

</body> 

</html> 


浏览 网 页 效果 如 图 1-7 所 示 。 





1-7 ”播放 视频 实例 


8. 六 村 多 线程 了 es 


提 到 多 线程 ， 大 多 数 人 多 会 想到 Visual C++、Visual C# 和 Java 等 高 级 语言 。 传 统 的 
Web 应 用 程序 都 是 单线 程 的 ， 完 成 一 件 事 后 才能 做 其 他 事情 ， 因 此 效率 不 高 。HTML5 新 
增 了 Web Workers 对 象 , 使 用 Web Workers 对 象 可 以 在 后 台 运行 JavaScript 程序 , 也 就 是 支 
持 多 线程 ， 从 而 提高 了 加 载 网 页 的 效率 。 








JavaScript 语法 基础 








JavaScript 简称 JS， 是 一 种 可 以 嵌入 到 HTML 页 面 中 的 脚本 语言 ，HIMLS 提供 的 很 
多 API 都 可 以 在 JavaScript 程序 中 调用 ， 因 此 学 习 JavaScript 编程 是 阅读 本 书后 面 内 容 的 
基础 。 


在 HTML 中 使 用 JavaScript 语言 


在 HIML 文件 中 使 用 JavaScript 脚本 时 , JavaScript 代码 需要 出 现在 <Script Language = 
"JavaScript"> 和 </Script> 之 间 。 
【 例 2-1】 一 个 简单 的 在 HTML 文件 中 使 用 JavaScript 脚本 的 实例 。 


<HTML> 
<HEAD> 
<TITLE> 简 单 的 JavaScript 代码 </TITLE> 
<Script Language ="JavaScript"> 
// 下 面 是 Javascript 代码 
document .write ("这 是 一 个 简单 的 Javascript 程序 !") ; 
document .close(); 
</Script> 
</HEAD> 
<BODY> 
简单 的 Javascript 脚本 
</BODY> 
</HTML> 


在 JavaScript 中 ， 使 用 // 作 为 注释 符 。 浏 览 器 在 解释 程序 时 ， 将 不 考虑 一 行程 序 中 // 后 
面 的 代码 。 

另外 一 种 插入 JavaScript 程序 的 方法 是 把 JavaScript 代码 写 到 一 个 js 文件 当中 , 然后 
在 HTML 文件 中 引用 该 js 文件， 方法 如 下 : 


<script src="***.js 文件 "></script> 
如 使 用 引用 js 文件 的 方法 实现 例 2-1 的 功能 ， 创 建 outputjs， 内 容 如 下 : 


document .write ("这 是 一 个 简单 的 Javascript 程序 !"); 


document .close(); 


HTML 文件 的 代码 如 下 : 
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<HTML> 
<HERAD><TITLE> 简 单 的 JavaScript 代码 </TITLE></HEAD> 
<BODY> 

<Script src="output.js"></Script> 

</BODY> 

</HTML> 


JavaScript 是 一 种 解释 型 的 编程 语言 ， 其 源 代码 在 发 往 客户 端 执行 之 前 不 需 经 过 编译 ， 
而 是 将 文本 格式 的 字符 代码 发 送 给 客户 端 由 浏览 器 解释 执行 。 注 意 与 Java 的 区 别 ，Java 的 
源 代 码 在 传递 到 客户 端 执行 之 前 必须 经 过 编译 ， 因 而 客户 端 上 必须 具有 相应 平台 上 的 解释 
器 ， 它 可 以 通过 解释 器 实现 独立 于 某 个 特定 的 平台 编译 代码 的 束缚 。 


基本 语法 
JavaScript 包含 下 面 5 种 原始 数据 类 型 。 
1. Undefined 


Undefined 型 即 为 未 定义 类 型 , 用 于 不 存在 或 者 没有 被 赋 初 始 值 的 变量 或 对 象 的 属性 ， 
如 下 列 语句 定义 变量 name 为 Undefined 型 ; 





Var name; 


定义 Undefined 型 变量 后 ， 可 在 后 续 的 脚本 代码 中 对 其 进行 赋值 操作 ， 从 而 自动 获得 
由 其 值 决 定 的 数据 类 型 。 

2. Null 

Null 型 数据 表示 空 值 ， 作 用 是 表明 数据 空缺 的 值 ， 一 般 在 设 定 已 存在 的 变量 (或 对 象 
的 属性 ) 为 空 时 较为 常用 。 区 分 Undefined 型 和 Null 型 数据 比较 麻烦 ， 一 般 将 Undefined 
型 和 Null 型 等 同 对 待 。 

3. Boolean 

Boolean 型 数据 表示 的 是 布尔 型 数据 ， 取 值 为 tue 或 false， 分别 表示 逻辑 真 和 假 ， 且 
任何 时 刻 都 只 能 使 用 两 种 状态 中 的 一 种 ， 不 能 同时 出 现 。 例 如 下 列 语句 分 别 定义 Boolean 
变量 bChooseA 和 bChooseB， 并 分 别 赋 予 初 值 tue 和 false: 





Var bChooseaA = true; 
Var bChooseB = false; 


4. String 

String 型 数据 表示 字符 型 数据 。 JavaScript 不 区 分 单个 字符 和 字符 串 ， 任 何 字 符 或 字 
符 串 都 可 以 用 双 引 号 或 单 引 号 引起 来 。 例 如 下 列 语句 中 定义 的 String 型 变量 nameA 和 
nameB 包含 相同 的 内 容 : 


Var nameR = "Tom" 7 


Var nameB = "Tom'7 
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如 果 字 符 串 本 身 含有 双 引 号 ， 则 应 使 用 单 引号 将 字符 串 括 起 来 ， 若 字符 串 本 身 含 有 单 
引号 ， 则 应 使 用 双 引 号 将 字符 串 引起 来 。 一 般 来 说 ， 在 编写 脚本 过 程 中 ， 双 引号 或 单 引号 
的 选择 在 整个 JavaScript 脚本 代码 中 应 尽量 保持 一 致 ， 以 养 成 好 的 编程 习惯 。 

5. Number 

Number 型 数据 即 为 数值 型 数据 ， 包 括 整 数 型 和 浮 点 型 ， 整 数 型 数 制 可 以 使 用 十 进 制 、 
八进制 以 及 十 六 进 制 标 识 ， 而 浮 点 型 为 包含 小 数 点 的 实数 ， 且 可 用 科学 记 数 法 来 表示 。 
例如 : 


var myDataA=8; 
var myDataB=6.3; 


上 述 代 码 分 别 定义 值 为 整数 8 的 Number 型 变量 myDataA 和 值 为 浮 点 数 6.3 的 Number 
型 变量 myDataB。 

JavaScript 脚本 语言 除了 支持 上 述 基本 数据 类 型 外 ， 也 支持 组 合 类 型 ， 如 数组 Array 和 
对 象 Object 等 。 








1， 常量 

常量 是 内 存 中 用 于 保存 固定 值 的 单元 ， 在 程序 中 常量 的 值 不 能 发 生 改变 。 

2. 变量 

变量 是 内 存 中 命名 的 存储 位 置 ， 可 以 在 程序 中 设置 和 修改 变量 的 值 。 在 JavaScript 中 ， 
可 以 使 用 var 关键 字 声 明 变量 ， 声 明 变 量 时 不 要 求 指明 变量 的 数据 类 型 。 例 如 : 


Var Xx? 
也 可 以 在 声明 变量 时 为 其 赋值 ， 例 如 : 


Var X= 下 和 

Var a=1,b=2,c=3,d=4; 

或 者 不 声明 变量 , 而 通过 使 用 变量 来 确定 其 类 型 , 但 这 样 的 变量 默认 是 全 局 的 , 例如 ;: 

= 

str = "This is a string"; 

exist = false; 

JavaScript 变量 名 需要 遵守 下 面 的 规则 : 

(1) 第 一 个 字符 必须 是 字母 、 下 画 线 〈(_) 或 美元 符号 (5$); 

(2) 其 他 字符 可 以 是 下 画 线 、 美 元 符号 或 任何 字母 或 数字 字符 。 

(3) 变量 名 称 对 大 小 写 敏 感 〈 也 就 是 说 x 和 XX 是 不 同 的 变量 )。 

JavaScript 脚本 程序 对 大 小 写 敏 感 ， 相 同 的 字母 ， 大 小 写 不 同 ， 代 表 的 意义 也 不 同 ， 
如 变量 名 name、Name 和 NAME 代表 三 个 不 同 的 变量 名 。 在 JavaScript 脚本 程序 中 ， 变 量 
名 、 函 数 名 、 运 算 符 、 关 键 字 、 对 象 属性 等 都 是 对 大 小 写 敏 感 的 。 同 时 ， 所 有 的 关键 字 、 
内 建 函 数 以 及 对 象 属性 等 的 大 小 写 都 是 固定 的 ， 甚 至 混合 大 小 写 ， 因 此 在 编写 JavaScript 
脚本 程序 时 ， 要 确保 输入 正确 ， 否 则 不 能 达到 编写 程序 的 目的 。 
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提示 : JavaScript 变量 在 使 用 前 可 以 不 作 声明 ， 采 用 弱 类 型 变量 检查 ， 而 是 解释 器 在 运 
行 时 检查 其 数据 类 型 。 而 Java 与 C 语言 一 样 , 采用 强 类 型 变量 检查 。 所 有 变量 在 编译 之 前 
必须 声明 ， 而 且 不 能 使 用 没有 赋值 的 变量 。 

变量 声明 时 无 须 显 式 指定 其 数据 类 型 既是 JavaScript 脚本 语言 的 优点 也 是 缺点 。 优 点 
是 编写 脚本 代码 时 不 需要 指明 数据 类 型 ， 使 变量 声明 过 程 简单 明了 ; 缺点 就 是 有 可 能 因 拼 
写 不 当 而 引起 致命 的 错误 。 


12.2.3 注释 A 


JavaScript 支持 两 种 类 型 的 注释 字符 。 

1. // 

/是 单行 注释 符 ， 这 种 注释 符 可 与 要 执行 的 代码 处 在 同一 行 ， 也 可 另 起 一 行 。 从 /开始 
到 行 尾 均 表示 注释 。 对 于 多 行 注释 ， 必 须 在 每 个 注释 行 的 开始 使 用 /。 

2. /*...*/ 

/* … */ 是 多 行 注释 符 ，… 表 示 注 释 的 内 容 。 这 种 注释 字符 可 与 要 执行 的 代码 处 在 同一 
行 ， 也 可 另 起 一 行 ， 甚 至 用 在 可 执行 代码 内 。 对 于 多 行 注释 ， 必 须 使 用 开始 注释 符 (/*) 
开始 注释 ， 使 用 结束 注释 符 (*/) 结束 注释 。 注 释 行 上 不 应 出 现 其 他 注释 字符 。 
?2.2.4 运算 符 和 表达 式 


编写 JavaScript 脚本 代码 过 程 中 ， 对 数据 进行 运算 操作 需 用 到 运算 符 。 表 达 式 则 由 党 
量 、 变 量 和 运算 符 等 组 成 。 

1. 算术 运算 符 

算术 运算 符 可 以 实现 数学 运算 ， 包 括 加 (+)、 减 (-)、 乘 (*)、 除 (/) 和 求 余 (%) 
等 。 具 体 使 用 方法 如 下 : 





var aybDyc? 

a=b+c; 

ee 

a DER 

a= bcs 

al= bcs 

2. 赋值 运算 符 

JavaScript 脚本 语言 的 赋值 运算 符 包含 =、+=、 一 、*=、/ 二 =、%=、&=、 人 等 ， 如 表 2-1 

所 示 


表 2-1 赋值 运算 符 
运算 符 ”举例 简要 说 明 
= m=n 将 运算 符 右边 变量 的 值 赋 给 左边 变量 





二 mt=n ”将 运算 符 两 侧 变量 的 值 相 加 并 将 结果 赋 给 左边 变量 
一 m-=n 将 运算 符 两 侧 变 量 的 值 相 减 并 将 结果 赋 给 左边 变量 
本 m*=n ”将 运算 符 两 侧 变量 的 值 相 乘 并 将 结果 赋 给 左边 变量 
广 m=n 将 运算 符 两 侧 变 量 的 值 相 除 并 将 整除 的 结果 赋 给 左边 变量 


%= m%=n 将 运算 符 两 侧 变量 的 值 相 除 并 将 余数 赋 给 左边 变量 
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续 表 
运算 符 ”举例 简要 说 明 
&= me&=n ”将 运算 符 两 侧 变量 的 值 进 行 按 位 与 操作 并 将 结果 赋 给 左边 变量 
全 m=n 将 运算 符 两 侧 变 量 的 值 进行 按 位 或 操作 并 将 结果 赋 给 左边 变量 
<<= m<<=n ”将 运算 符 左 边 变 量 的 值 左 移 由 右边 变量 的 值 指定 的 位 数 ， 并 将 结果 赋 给 左边 变量 
>>= m>>=n ”将 运算 符 左边 变量 的 值 右 移 由 右边 变量 的 值 指定 的 位 数 ， 并 将 结果 赋 给 左边 变量 


例如 : 


var iNum = 10; 
iNum *= 27 
document .write (iNum); // 输 出 "20" 


3. 关系 运算 符 
JavaScript 脚本 语言 中 用 于 比较 两 个 数据 的 运算 符 称 为 比较 运算 符 ， 包 括 = =、!=、>、 
<、<=、>= 等 ， 其 具体 作用 见 表 2-2。 


表 2-2 关系 运算 符 
一 等 于 运算 符 〈 两 个 =)。 例 如 a==-b， 如 果 a 等 于 b， 则 返回 True;， 否则 返回 False 
=== 恒 等 运 算 符 (3 个 =)。 例 如 a===b， 如 果 a 的 值 等 于 b， 而 且 它们 的 数据 类 型 也 相同 ， 
则 返回 True， 和 否则 返回 False。 例 如 : 
Var a=8 , b="8"; 
a=——b; //true 
a=—=b; //false 
全 不 等 运算 符 。 例 如 al=b， 如 果 a 不 等 于 b， 则 返回 True; 否则 返回 False 
! 一 不 恒 等 ， 左 右 两 边 必 须 完全 不 相等 〈 值 、 类 型 都 不 相等 ) 才 为 True 


把 小 于 运算 符 
> 大 于 运算 符 
4. 逻辑 运算 符 


JavaScript 脚本 语言 的 逻辑 运算 符 包 括 &&、|| 和 ! 等 , 用 于 两 个 逻辑 型 数据 之 间 的 操作 ， 
返回 值 的 数据 类 型 为 布尔 型 。 逻 辑 运算 符 的 功能 如 表 2-3 所 示 。 


表 2-3 逻辑 运算 符 
逻辑 运算 符 具体 描述 
&& 逻辑 与 运算 符 。 例 如 a && b， 当 a 和 b 都 为 True 时 等 于 True; 否则 等 于 False 
| 逻辑 或 运算 符 。 例如 al|b， 当 a 和 b 至 少 有 一 个 为 True 时 等 于 True; 否则 等 于 False 
! 逻辑 非 运算 符 。 例 如 !a， 当 a 等 于 True 时 ， 表 达 式 等 于 False; 否则 等 于 True 





逻辑 运算 符 一 般 与 比较 运算 符 捆绑 使 用 , 用 以 引入 多 个 控制 的 条 件 , 以 控制 JavaScript 
脚本 代码 的 流向 。 

5. 位 运算 符 

位 运算 符 用 于 将 目标 数据 (二进制 形式 ) 往 指 定 方向 移动 指定 的 位 数 。JavaScript 脚本 
语言 支持 <<、>> 和 >>> 等 位 运算 符 ， 其 具体 作用 见 表 2-4。 
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表 2-4 位 运算 符 

位 运算 符 ” 具体 描述 举例 

~ 按 位 非 运算 一 (3) 结果 是 2 
& 按 位 与 运算 4&7 结果 是 4 
| 按 位 或 运算 4|7 结果 是 7 
^ 按 位 异 或 运算 4^7 结果 是 3 
<< 位 左 移 运 算 9<<2 结果 是 36 
>> 有 符号 位 右 移 运算 ， 将 左边 数据 表示 的 二 进 制 值 向 右 移动 ， 忽 ”9>>2 结果 是 2 

略 被 移出 的 位 ， 左 侧 空位 补 符号 位 《负数 补 1， 正 数 补 0) 
>>> 无 符号 位 右 移 运算 ， 将 左边 数据 表示 的 二 进 制 值 向 右 移动 ， 忽 ”9>>>2 结果 是 2 


请 


略 被 移出 的 位 ， 左 侧 空位 补 0 


-3 的 补 码 是 11111101， 一 〈-3) 按 位 非 运算 所 以 结果 是 2。 

4&7 结果 是 4， 因 为 00000100 &00000111 的 结果 是 00000100 所 以 是 4。 

9>>2 结果 是 2， 因 为 00001001>>2 是 右 移 2 位 ， 结 果 是 000010 所 以 是 2。 

6. 条 件 运 算 符 

在 JavaScript 脚本 语言 中 ,“? :” 运 算 符 用 于 创建 条 件 分 支 。 较 f…else 语句 更 加 简 
其 语法 结构 如 下 : 


(condition) ?statementA:statementB; 


上 述 语 句 首 先 判 断 条 件 condition， 若 结果 为 真 则 执行 语句 statementA， 否 则 执行 语句 


statementB。 值 得 注意 的 是 ， 由 于 JavaScript 脚本 解释 器 将 分 号 “;” 作 为 语句 的 结束 符 ， 
statementA 和 statementB 语句 均 必须 为 单个 脚本 代码 ， 若 使 用 多 个 语句 会 报错 。 


考察 如 下 简单 的 分 支 语 句 : 


var age= prompt ("请 输入 您 的 年 龄 (数值 ) : ",25); 
var contentA="\n 系统 提示 : \n 对 不 起 ， 您 未 满 18 岁 ， 不 能 浏览 该 网 站 ! \n"; 
var contentB="\n 系统 提示 : \n 单 击 ' 确定 按钮， 注册 网 上 商城 开始 欢乐 之 旅 ! " 


(age<18) ?alert (contentA) :alert (ContentB) 7 


程序 运行 后 ， 单 击 原始 页 面 中 的 “测试 ”按钮 ， 弹 出 提示 框 提示 用 户 输入 年 龄 ， 并 根 


据 输 入 年 龄 值 弹出 不 同 提示 。 


效果 等 同 于 : 


if(age<18)alert (contentA); 
elsealert (ContentB) 


7. 逗号 运算 符 
使 用 逗号 运算 符 可 以 在 一 条 语句 中 执行 多 个 运算 ， 例 如 : 
var iNuml = 1, iNum = 2, iNum3 = 3; 


8.typeof 运算 符 
typeof 运算 符 用 于 表明 操作 数 的 数据 类 型 , 返回 数值 类 型 为 一 个 字符 串 。 在 JavaScript 


脚本 语言 中 ， 其 使 用 格式 如 下 : 
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Var myString=typeof (data); 


【 例 2-2】 演示 使 用 typeof 运算 符 返回 变量 类 型 的 方法 ， 代 码 如 下 : 


<html> 
<body> 
<script type="text/javascript"> 
Var temp; 
document .write (typeof temp); // 输 出 "undefined" 
document .write ("<br>"); 
temp = "test string"; 
document .write (typeof temp); // 输 出 "string" 
temp = 100; 
document .write ("<br>"); 
document .write (typeof temp); // 输 出 " Number" 
</script> 
</body> 
</html> 


可 以 看 出 ， 使 用 关键 字 var 定义 变量 时 ， 若 不 指定 其 初始 值 ， 则 变量 的 数据 类 型 默认 
为 undefined。 同 时 ， 若 在 程序 执行 过 程 中 ， 变 量 被 赋予 其 他 隐 性 包含 特定 数据 类 型 的 数值 
时 ， 其 数据 类 型 也 随 之 发 生 更 改 。 

9. 其 他 运算 符 

JavaScript 中 还 包含 其 他 几 个 特殊 的 运算 符 ， 其 具体 作用 见 表 2-5。 


表 2-5 ”其 他 几 个 特殊 的 运算 符 
一 元 运算 符 具体 描 述 


delete 删除 对 以 前 定义 的 对 象 属性 或 方法 的 引用 。 例 如 : 
varo=newObject:// 创 建 Object 对 象 
deleteo:// 删 除 对 象 o 
void 出 现在 任何 类 型 的 操作 数 之 前 ， 作 用 是 舍弃 运算 数 的 值 ， 返 回 undefined 作为 表达 式 的 


值 。 例 如 : varx=1,y=2; 
document.write(void(x+y)):// 输 出 :， undefined 

站 增 量 运算 符 。 了 解 C 语言 或 Java 的 读者 应 该 认识 此 运算 符 。 它 与 C 语言 或 Java 中 的 意 
义 相同 ， 可 以 出 现在 操作 数 的 前 面 ( 此 时 叫 作 前 增 量 运算 符 )， 也 可 以 出 现在 操作 数 的 
后 面 〈 此 时 叫 作 后 增 量 运算 符 )。++ 运 算 符 对 操作 数 加 1， 如 果 是 前 增 量 运算 符 ， 则 返 
回 加 1 后 的 结果 ; 如 果 是 后 增 量 运算 符 ， 则 返回 操作 数 的 原 值 ， 再 对 操作 数 执行 加 1 操 
作 。 例 如 : variNum=10; 
document .writeGiNum++):// 输 出 "10" 
document.write(++iNum);// 输 出 "12" 

一 减 量 运算 符 。 它 与 增 量 运算 符 的 意义 相反 ， 可 以 出 现在 操作 数 的 前 面 (此 时 叫 作 前 减 量 
运算 符 )， 也 可 以 出 现在 操作 数 的 后 面 〈 此 时 叫 作 后 减 量 运算 符 )。-- 运 算 符 对 操作 数 减 
1， 如 果 是 前 减 量 运算 符 ， 则 返回 减 1 后 的 结果 ; 如 果 是 后 减 量 运算 符 ， 则 返回 操作 数 
的 原 值 ， 再 对 操作 数 执行 减 1 操作 


常用 控制 语句 


对 于 JavaScript 程序 中 的 执行 语句 ， 默 认 是 按照 书写 顺序 依次 执行 的 ， 这 时 说 这 样 的 
语句 是 顺序 结构 的 。 但 是 ， 仅 有 顺序 结构 还 是 不 够 的 ， 因 为 有 时 候 需 要 根据 特定 的 情况 ， 
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有 选择 地 执行 某 些 语句 ， 这 时 就 需要 一 种 选择 结构 的 语句 。 另 外 ， 有 时 候 还 可 以 在 给 定 条 
件 下 反复 执行 某 些 语句 ， 这 时 称 这 些 语句 是 循环 结构 的 。 有 了 这 三 种 基本 的 结构 ， 就 能 够 
构建 任意 复杂 的 程序 了 。 

1. 并 语句 

JavaScript 的 让 语句 的 功能 与 其 他 语言 的 非常 相似 ， 都 是 用 来 判定 给 出 的 条 件 是 否 满 
足 ， 然后 根据 判断 的 结果 〈 即 真 或 假 ) 决定 是 否 执行 给 出 的 操作 。 让 语句 是 一 种 单 选 结 构 ， 
它 选择 的 是 做 与 不 做 。 它 由 三 部 分 组 成 : 关键 字 计 本 身 、 测 试 条 件 真 假 的 表达 式 (我 们 简 
称 为 条 件 表达 式 ) 和 表达 式 结果 为 真 〈 即 表达 式 的 值 为 非 零 ) 时 要 执行 的 代码 。if 语句 的 
语法 形式 如 下 所 示 : 


if (表达 式 ) 
语句 体 


站 语句 的 流程 图 如 图 2-1 所 示 。 

站 语句 的 表达 式 用 于 判断 条 件 , 可 以 用 >( 大 于 )、<( 小 于 )、 
一 (等 于 )、>= (大 于 等 于 )、<= (小 于 等 于 ) 来 表示 其 关系 。 

现在 我 们 用 一 个 示例 程序 来 演示 一 下 让 语 句 的 用 法 。 





// 比 较 a 是 否 大 于 0 
if (a >0) 
document .write ("大 于 0"); 
图 2-1 六 语句 的 流程 图 如 果 a 大 于 0 则 显示 出 “大 于 0” 的 文字 提示 , 否则 不 显示 。 


2. if…else… 语 句 

上 面 的 站 语句 是 一 种 单 选 结 构 ， 也 就 是 说 ， 如 果 条 件 为 真 〈 即 表达 式 的 值 为 真 )， 那 
么 执行 指定 的 操作 ; 否则 就 会 跳 过 该 操作 。 而 if…else… 语 句 是 一 种 双 选 结构 ， 在 两 种 备 选 
行动 中 选择 哪 一 个 的 问题 。if…else… 语 句 由 5 部 分 组 成 : 关键 字 if、 测 试 条 件 真 假 的 表达 
式 、 表 达 式 结果 为 真 ( 即 表达 式 的 值 为 非 零 ) 时 要 执行 的 代码 ， 以 及 关键 字 else 和 表达 式 
结果 为 假 〈 即 表达 式 的 值 为 零 ) 时 要 执行 的 代码 。 





























让 …else… 语 句 的 语法 形式 如 下 所 示 : 真 。 假 
if (表达 式 ) 
语句 1 
ee 语句 1 语句 2 
语句 2 j 


if…else… 语 句 的 示意 图 如 图 2-2 所 示 。 

下 面 我 们 对 上 面 的 示例 程序 进行 修改 , 以 演示 让 … 2-2 让 "else… 语 句 的 流程 图 
else… 语 名 的 使 用 方法 。 我 们 的 程序 是 很 简单 的 ， 如 果 a 这 个 数字 大 于 0， 那 么 就 输出 “大 
于 0” 一行 信 息 ;否则 ， 输 出 另 一 行 “ 小 于 等 于 0” 字符 串 ， 指 出 a 小 于 等 于 0。 代码 如 下 
所 示 : 
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if (a >0) 

document .write ("大 于 0"); 
else 

document .write ("小 于 等 于 0"); 


3. if.…else if…else 语句 
有 时 候 ,我 们 需要 在 多 组 动作 中 选择 一 组 执行 , 这 时 就 会 用 到 多 选 结构 ,对 于 JavaScript 
语言 来 说 就 是 if…else if…else 语句 。 该 语句 可 以 利用 一 系列 条 件 表达 式 进 行 检查 ， 并 在 某 
个 表达 式 为 真 的 情况 下 执行 相应 的 代码 。 需 要 注意 的 是 ， 虽 然 下 …else if…else 语句 的 备 选 
动作 较 多 ， 但 是 有 且 只 有 一 组 操作 被 执行 ， 该 语句 的 语法 形式 如 下 所 示 : 
if (表达 式 1) 
语句 1; 
if (表达 式 2) 
语句 2; 
if (表达 式 3) 
语句 3; 


else if (表达 式 n) 
语句 n; 
else 


语句 n+17 


注意 ， 最 后 一 个 else 子 句 没有 进行 条 件 判断 ， 它 实际 上 处 理 与 前 面 所 有 条 件 都 不 匹配 
的 情况 ， 所 以 else 子 句 必须 放 在 最 后 。if…else if…else 语句 的 示意 图 如 图 2-3 所 示 。 




















图 2-3 if…else if…else 语句 的 流程 图 


下 面 我 们 继续 对 上 面 的 示例 程序 进行 修改 ， 以 演示 下 …else if…else 语句 的 使 用 方法 。 
具体 的 代码 如 下 所 示 : 
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if (a >0) 

document .write ("大 于 0"); 
else if (a==0) 

document .write ("等 于 0"); 
else 


document .write ("小 于 0"); 


以 上 区 分 a 大 于 0，a 等 于 0 和 a 小 于 0 三 种 情况 分 别 输出 不 同 信息 。 
【 例 2-3】 下 面 是 一 个 显示 当前 系统 日 期 的 JavaScript 代码 ,其 中 使 用 到 if…else if*…else 
语句 。 


<HTML> 
<HEAD><TITLE> 显 示 当前 系统 日 期 </TITLE></HEAD> 
<BODY> 
<Script Language ="Javascript"> 
d=new Date(); 
document .write (" 今 天 是 ") 
if(d.getDay()==1) { 
document .write ("星期 一 "); 
} 
else if(d.getDay()==2) { 
document .write ("星期 二 "); 
} 
else if(d.getDay()==3) { 
document .write(" 星 期 三 ") 
2 
else if(d.getDay()==4) { 
document .write ("星期 四 "); 
} 
else if(d.getDay()==5) { 
document .write ("星期 五 "); 
} 
else if(d.getDay()==6) { 
document .write ("星期 六 "); 
, 
else { 
document .write ("星期 日 "); 
} 
</Script> 
</BODY> 
</HTML> 


Date 对 象 用 于 处 理 时 间 和 日 期 ，getDay0 是 Date 对 象 的 方法 ， 它 返回 表示 星期 几 的 数 


字 。 星 期 一 则 返回 1， 星 期 二 则 返回 2，…… 星期 六 则 返回 6。 
【 例 2-4】 输入 学 生 的 成 绩 score， 按 分 数 输 出 其 等 级 : score 宇 90 为 优 ，90>score 宇 80 
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为 良 ，80>score 二 70 为 中 ，70>score 宇 60 为 及 格 ，score<60 为 不 及 格 。 


<HTML> 
<HEAD><TITLE> 按 分 数 输出 其 等 级 </TITLE></HEAD> 
<BODY> 
<Script Language ="JavaScript"> 
var MyScore = prompt (" 请 输入 成 绩 ") ; 
Score=parseInt (MyScore); 
if (score >= 90) 

document .write (" 优 ") ; 
else if (score >= 80) 

document .write (" 良 "); 
else if (score >= 70) 

document .write ("中 "); 
else if (score >= 60) 

document .write ("及 格 "); 
SLSe 

document .write ("不 及 格 "); 
</Script> 
</BODY> 
</HTML> 


说 明 : 三 种 选择 语句 中 ， 条 件 表达 式 都 是 必 不 可 少 的 组 成 部 分 。 那 么 哪些 表达 式 可 以 
作为 条 件 表 达 式 呢 ? 基本 上 ， 最 常用 的 是 关系 表达 式 和 逻辑 表达 式 。 

4. switch 语句 

如 果 有 多 个 条 件 ， 可 以 使 用 嵌 套 的 if 语句 来 解决 ， 但 此 种 方法 会 增加 程序 的 复杂 度 ， 
并 降低 程序 的 可 读 性 。 若 使 用 switch 语句 可 实现 多 选 一 程序 结构 ， 其 基本 结构 如 下 : 


switch (表达 式 ) { 


case 值 1: 
语句 块 1 
break; 

case 值 2: 
语句 块 2 
break; 

case 值 n: 
语句 块 n 
break; 

default: 
语句 块 n+1 

} 
说 明 : 


(1) 当 switch 后 面 括号 中 表达 式 的 值 与 某 一 个 case 分 支 中 常量 表达 式 匹 配 时 ， 就 执 
行 该 分 支 。 如 果 所 有 的 case 分 支 中 常量 表达 式 都 不 能 与 switch 后 面 括号 中 表达 式 的 值 匹 
配 ， 则 执行 default 分 支 。 
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(2) 每 一 个 case 分 支 最 后 都 有 一 个 break 语句 ， 执 行 此 语句 会 退出 switch 语句 ,不 再 
执行 后 面 的 语句 。 

(3) 每 个 常量 表达 式 的 取 值 必须 各 不 相同 , 否则 将 引起 歧义 。 各 case 后 面 必须 是 常量 ， 
而 不 能 是 变量 或 表达 式 。 

switch 语句 的 示意 图 如 图 2-4 所 示 。 





开始 











1 


等 于 true 

















图 2-4 switch 语句 的 流程 图 
【 例 2-$】 将 例 2-4 的 按 分 数 输出 其 等 级 使 用 switch 语句 实现 。 


<HTML> 
<HEAD><TITLE> 使 用 switch 语句 实现 按 分 数 输 出 其 等 级 </TITLE></HEAD> 
<BODY> 
<Script Language ="Javascript"> 
var MyScore = prompt ("请 输入 成 绩 ") ; 
score=parseInt (MyScore); 
switch(score) { 
case 10: 
case 9 
document .write (" 优 ") ; break; 
case 8s 
document .WwWFite (" 良 ") ?break; 
case os 
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document .write (" 中 ") break; 
case 6: 
document .write ("及 格 "); break; 
default: 
document .write ("不 及 格 "); 
} 
</Script> 
</BODY> 
</HTML> 
?2.3.2 ”循环 结构 语句 


程序 在 一 般 情况 下 是 按 顺 序 执行 的 。 编 程 语言 提供 了 各 种 控制 结构 ， 人 允许 更 复杂 的 执 
行路 径 。 循 环 语句 允许 我 们 执行 一 个 语句 或 语句 组 多 次 。 





























1. while 语句 
while 语句 的 语法 格式 为 : [| 一 
while (表达 式 ) < 各 这 > 
{ 1 喜 
循环 体 语句 语句 
} 
1 


其 作用 是 : 当 指 定 的 条 件 表达 式 为 真 时 ， 执 行 while 语句 中 
的 循环 体 语句 , 其 流程 图 如 图 2-5 所 示 。 其 特点 是 先 判断 表达 式 ， 图 2-5 while 语句 的 流程 图 
后 执行 语句 。while 循环 又 称 为 当 型 循环 。 

【 例 2-6】 用 while 循环 来 计算 1+2+3+…+98+99+100 的 值 。 


<html> 
<head> 
<title> 计 算 1+2+3+…+98+99+100 的 值 </title> 
</head> 
<body> 
<script language="JavaScript" type="text/javascript"> 
var total=0; 
Var i=1; 
while (i<=100){ 
total+=i; 
了 二 十 
} 
alert (total); 
/sacrinEs 
</body> 
</html> 


2. do…while 语句 
do…while 语句 的 语法 格式 如 下 : 


HTML5 网 页 游戏 设计 从 基础 到 开发 


do 

{ 

循环 体 语句 

} while (表达 式 ) ; 


do…while 语句 的 执行 过 程 为 : 先 执行 一 次 循环 体 语句 ， 
然后 判别 表达 式 ， 当 表达 式 的 值 为 真 继续 执行 循环 体 语句 ， 
如 此 反复 ， 直 到 表达 式 的 值 为 假 为 止 ， 此 时 循环 结束 。 可 以 
用 图 2-6 表示 其 流程 。 

说 明 : 在 循环 体 相 同 的 情况 下 ，while 语句 和 do…while 
语句 的 功能 基本 相同 。 二 者 的 区 别 在 于 ， 当 循环 条 件 一 开始 
就 为 假 时 ，do…while 语句 中 的 循环 体 至 少 会 被 执行 一 次 , 而 
图 2-6 do…while 语句 的 流程 图 while 语句 则 一 次 都 不 执行 。 

【 例 2-7】 用 do…while 循环 来 计算 1+2+3+…+98+99+ 











循环 体 语句 








100 的 值 。 


<html> 
<head> 
<title> 计 算 1+2+3+…+98+99+100 的 值 </title> 
</head> 
<body> 
<script language="JavaScript" type="text/javascript"> 
var total=0; 
Var i=1; 
dof 
total+=i; 
++2》 
}while (i<=100); 
alert (total); 


</script> 
</body> 
</html> 
修改 上 面 程 序 实现 如 图 2-7 所 示 的 计算 某 个 区 间 数 字 的 和 。 单 击 “ 显 示 结 果 ” 按 钮 出 
现 显示 结果 的 警告 框 。 
计算 从 | 加 的 值 
显示 结果 

图 2-7 计算 某 个 区 间 数 字 的 和 
<html> 
<head> 


<title> 计 算 区 间 数 字 的 和 </title> 
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</head> 
<body> 
<table style="width:350px;"> 
<tbody> 
<tr> 
<td style="text-align: center; "> 
计算 从 <input id="demol" size="4" type="text" /> 到 
<input id="demo2" size="4" type="text" /> 的 值 
</td> 
</tr> 
EP 


<td style="text-align: center;"><input id="calc" type="button" 
value=" 显 示 结 果 "/></td> 
</tr> 
</tbody> 
</table> 
<script type="text/javascript"> 
document .getElementById("calc") .onclick=function(){ 
var beginNum=parseInt (document .getElementById ("demo1") .value); 
Var endNum=parseInt (document .getElementById ("demo2") .value); 
var total=0; 
if( !isNaN(beginNum) && !isNaN(endNum) && (endNum>beginNum) ){ 
for (var i=beginNum; i<=endNum; i++){ 
total+=i; 
} 
alert (total); 
}elsef 


alert ("你 输入 的 数字 没有 意义 ! ") ; 


} 
</script> 
</body> 
</html> 


3. for 语句 
for 语句 是 循环 结构 语句 , 按照 指定 的 循环 次 数 ,循环 执行 循环 体内 的 语句 (或 语句 块 )， 
其 基本 结构 如 下 : 
for (表达 式 1; 表达 式 2; 表达 式 3) 
{ 
循环 体 语句 
} 


该 语句 的 执行 过 程 如 下 : 
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执行 表达 式 1 

















循环 体 语句 


1 
执行 表达 式 3 





























(1) 执行 for 后 面 的 表达 式 1。 
(2) 判断 表达 式 2， 若 表达 式 2 的 值 为 真 ， 则 执行 for 语句 的 
假 。” 内 嵌 语 句 〈 即 循环 体 语句 )， 然 后 执行 第 (3) 步 ， 若 表达 式 2 的 
值 为 假 ， 则 循环 结束 ， 执 行 第 (5) 步 。 
(3) 执行 表达 式 3。 
(4) 返回 继续 执行 第 (2) 步 。 
(5) 循环 结束 ， 执 行 for 语句 的 循环 体 下 面 的 语句 。 
可 以 用 图 2-8 表示 其 流程 。 


三 个 表达 式 都 可 以 省 略 ， 如 果 表 达 式 2 省 略 则 无 限 循环 ， 注 


意 分 号 仍 要 保 久 。 
图 2-8 for 循环 的 流程 图 【 例 2-8】 用 for 循环 来 计算 1+2+3+…+98+99+100 的 值 。 
<html> 
<head> 
<title> 计 算 1+2+3+…+98+99+100 的 值 </title> 
</head> 
<body> 


<script language="JavaScript" type="text/javascript"> 


var total=0; 

for (var i=1l; i<=100; i++){ 
total+=i; 

} 

alert (total); 

</script> 

</body> 

</html> 


4. continue 语句 


continue 语句 的 一 般 格式 为 : 


continue; 


该 语句 只 能 用 在 循环 结构 中 。 当 在 循环 结构 中 遇 到 continue 语句 时 ， 则 跳 过 continue 
语句 后 的 其 他 语句 ， 结 束 本 次 循环 ， 并 转 去 判断 循环 控制 条 件 ， 以 决定 是 否 进行 下 一 次 


循环 。 
【 例 2-9】 


<html> 

<head> 
<title> 计 算 偶数 和 </title> 
</head> 

<body> 


计算 1 一 100 的 偶数 和 2+4+6+…+100。 


<script language="JavaScript" type="text/javascript"> 


var total=0; 


Var i=1; 
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while(i<=100){ 
if (ig2==1) // 奇 数 
{ 
i++? 
continue; 
} 
total+=i; 
i++2? 
} 
alert (total); 
</script> 
</body> 
</html> 


如 果 (i%2==1)， 表 示 变 量 i 是 奇数 。 此 时 只 对 变量 i 加 1， 然 后 执行 continue; 语 句 开 始 
下 一 个 循环 ， 并 不 将 其 累加 到 变量 sum 中 。 

5. break 语句 

break 语句 的 一 般 格 式 为 : 


break; 


该 语句 只 能 用 于 两 种 情况 : 

(1) 用 在 switch 结构 中 , 当 某 个 case 分 支 执行 完 后 , 使 用 break 语句 跳出 switch 结构 。 

(2) 用 在 循环 结构 中 ， 用 break 语句 来 结束 循环 。 如 果 放 在 嵌 套 循环 中 ， 则 break 语句 
只 能 结束 其 所 在 的 那 层 循环 。 

【 例 2-10】 计算 1+2+3+…+98+99+100 的 值 。 


<html> 
<head> 
<title> 计 算 1+2+3+…+98+99+100 的 值 </title> 
</head> 
<body> 
<script language="JavaScript" type="text/javascript"> 
var total=0; 
for (var i=1; ;i++) { // 无 限 循环 

if(i>100){ 

break; 

} 

total+=i; 
1 
alert (total) 7 
</scripnt> 
</body> 
</html> 


进入 循环 后 ， 用 直 语 句 来 判断 i 的 值 ， 如 果 这 100， 执 行 break 语句 ， 结 束 循环 ， 否 则 
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继续 执行 循环 。 


EE 下 


函数 function) 由 若干 条 语句 组 成 ， 用 于 实现 特定 的 功能 。 函 数 包含 函数 名 、 若 干 参 
数 和 返回 值 。 一 旦 定义 了 函数 ， 就 可 以 在 程序 中 需要 实现 该 功能 的 位 置 调用 该 函数 ， 给 程 
序 员 共享 代码 带 来 了 很 大 方便 。 在 JavaScript 中 ， 除 了 提供 丰富 的 内 置 函数 外 ， 还 允许 用 
户 创建 和 使 用 自 定义 函数 。 

1.2.4.1.. 创 建 自 定义 函数 


可 以 使 用 function 关键 字 来 创建 自 定义 函数 ， 其 基本 语法 结构 如 下 : 
function 函数 名 (参数 列表 ) 





{ 
函数 体 
} 


创建 一 个 非常 简单 的 函数 PrintWelcome ， 它 的 功能 是 打印 字符 串 “ 欢 迎 使 用 
JavaScript”， 代码 如 下 : 

















function PrintWelcome() 

document .write ("欢迎 使 用 Javascript"); 

创建 函数 PrintString()， 通 过 参数 决定 要 打印 的 内 容 。 
function Printstring(str) 


document .write (str); 





1. 在 JavaScript 中 使 用 函数 名 来 调用 函数 

在 JavaScript 中 ， 可 以 直接 使 用 函数 名 来 调用 函数 。 无 论 是 内 置 函 数 还 是 自 定义 函数 ， 
调用 函数 的 方法 都 是 一 致 的 。 

【 例 2-11】 调用 PrintWelcome() 函 数 ， 显示“ 欢迎 使 用 JavaScript” 字 符 串 ， 代 码 如 下 : 


<HTML> 
<HEAD><TITLE> 调 用 PrintWelcome () 函数 </TITLE></HEAD> 
<BODY> 
<Script Language ="JavaScript"> 
function PrintWelcome () 
攻 
document .write ("欢迎 使 用 Javascript"); 
i; 
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PrintWelcome (); 
</Script> 
</BODY> 

</HTML> 


【 例 2-12】 调用 sum0O 函 数 ， 计 算 并 打印 numl 和 num2 之 和 ， 代 码 如 下 : 


<HTML> 
<HEAD><TITLE> 计 算 并 打印 numl 和 num 2 之 和 </TITLE></HEAD> 
<BODY> 
<Script Language ="JavaScript"> 
function sum(numl, num2) 
{ 
document .write (numl + num2); 
} 
sum(1l, 2); 
</Script> 
</BODY> 
</HTML> 


2. 在 HTML 中 使 用 "javascript:" 方 式 调用 JavaScript 函数 
在 HTML 中 的 a 链接 中 可 以 使 用 "javascript:" 方 式 调用 JavaScript 函数 ， 方 法 如 下 : 


<a href="javascript :函数 名 (参数 列表 ) ">…</a> 
【 例 2-13】 在 HIML 中 使 用 "javascript:" 方 式 调用 JavaScript 函数 的 例子 。 


<HTML> 
<HEAD><TITLE>a 链接 中 使 用 "javascript:" 方 式 调用 函数 </TITLE></HEAD> 
<BODY> 

<a href="javascript:alert (' 您 单 击 了 这 个 超 链接 ')"> 请 点 我 </a> 
</BODY> 


</HTML> 

<HTML> 

<HEAD><TITLE> 

【 例 2-14】 调用 sum 函数 的 例子 。 
</TITLE></HEAD> 

<BODY> 


<Script Language ="JavaScript"> 
function sum(numl, num2) 
{ 
document .write (numl + num2); 
} 
</Script> 
<a href="javascript:sum(1，2) "> 请 点 我 </a> 
</BODY> 
</HTML> 
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3. 与 事件 结合 调用 JavaScript 函数 

可 以 将 JavaScript 函数 指定 为 JavaScript 事件 的 处 理 函数 。 当 触发 事件 时 会 自动 调用 指 
定 的 JavaScript 函数 。 关 于 JavaScript 事件 处 理 将 在 第 3 章 介 绍 。 
? 2.4.3 ”变量 的 作用 域 


在 函数 中 也 可 以 定义 变量 ， 在 函数 中 定义 的 变量 被 称 为 局 部 变量 。 局 部 变量 只 在 定义 
它 的 函数 内 部 有 效 ， 在 函数 体 之 外 ， 即 使 使 用 同名 的 变量 ， 也 会 被 看 作 是 另 一 个 变量 。 

相应 地 ， 在 函数 体 之 外 定义 的 变量 是 全 局 变量 。 全 局 变量 在 定义 后 的 代码 中 都 有 效 ， 
包括 它 后 面 定义 的 函数 体内 。 如 果 局 部 变量 和 全 局 变量 同名 , 则 在 定义 局 部 变量 的 函数 中 ， 


只 有 局 部 变量 是 有 效 的 。 
【 例 2-15】 变量 的 作用 域 实例 。 
<HTML> 
<HEAD><TITLE> 变 量 的 作用 域 实例 </TITLE></HEAD> 
<BODY> 
<Script Language ="JavaSscript"> 
var a = 100; // 全 局 变量 
function setNumber() { 
var a = 10; // 局 部 变量 


document .write (a); // 打 印 局 部 变量 a 

} 

setNumber (); 

document .write ("<BR>"); 

document .write (a); // 打 印 全 局 变量 a 
</Script> 
</BODY> 
</HTML> 


* 2.4.4 函数 的 返回 值 


可 以 为 函数 指定 一 个 返回 值 ， 返 回 值 可 以 是 任何 数据 类 型 ， 使 用 return 语句 可 以 返回 
函数 值 并 退出 函数 ， 语 法 如 下 : 
function 函数 名 () { 
return 返回 值 ; 





} 
【 例 2-16】 retum 返回 值 实例 。 


<HTML> 
<HEAD><TITLE>return 返回 值 </TITLE></HEAD> 
<BODY> 





<Script Language ="JavaScript"> 
function sum(numl, num2) 
二 
return numl + num2; 


第 2 章 JavaScript 语法 基础 


} 

document .write (sum(1, 10)); 
/Script> 
</BODY> 
</HTML> 


如 果 改 成 求 (mn) 两 个 数字 的 和 ， 代 码 如 下 : 


<script language="JavaScript" type="text/javascript"> 
function getTotal (m,n){ 
Var total=0; 
if (m>=n){ 
return false; //n 必须 大 于 m， 否 则 无 意义 
} 
for (var i=m;i<=n;i++){ 
total+=i; 
} 
return total; 
} 
document .write (getTotal (1, 10)); 
</script> 


?2.4.5 ”定义 函数 库 





JavaScript 函数 库 是 一 个 .js 文件 ， 其 中 包含 函数 的 定义 。 
【 例 2-17】 创建 一 个 函数 库 mylibjs， 其 中 包含 两 个 函数 PrintString0 和 sum()， 代 码 
如 下 : 


//mylib.js 函数 库 

function Printstring (str)// 打 印字 符 串 
下 

document .write (str) 7 

} 

function sum(numl，num2)// 求 和 


{ 
document .write (numl + num2) 7 


} 
在 HIML 文件 中 引用 函数 库 js 文件 的 方法 如 下 : 


<script src=" 函 数 库 js 文件 "></script> 
<script> 
// 引 用 js 文件 中 的 函数 


<Nacrint> 


【 例 2-18】 引用 函数 库 js 文件 。 


<HTML> 
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<HEAD><TITLE> 引 用 函数 库 js 文件 </TITLE></HEAD> 
<BODY> 

<Script src="mylib.js"></Script> 

<script> 

Printstring ("传递 参数 ") ; 

sum(1, 2) 

</script> 

</BODY> 

</HTML> 


“2.4.6 JavaScript 内 置 函 数 
1. alert() 函 数 


alert() 函 数 用 于 弹出 一 个 消息 对 话 框 ， 该 对 话 框 包括 一 个 “确定 ”按钮 。alert(O) 函 数 的 
语法 如 下 : 


alert (str); 


参数 str 是 string 类 型 的 变量 或 字符 串 ， 指 定 消息 对 话 框 的 内 容 。 
【 例 2-19】 使 用 alertO 函 数 弹出 一 个 消息 对 话 框 的 例子 。 


<HTML><HEAD><TITLE> 演 示 使 用 alert () 的 使 用 </TITLE></HEAD> 
<BODY> 
<Script LANGUAGE = JavaScript> 

function Clickme() 

{ 

alert ("请 输入 用 户 名 ") ; 

} 
</script> 
<p><a href=# onclick="Clickme () "> 点 击 试 一 下 </a></p> 
</BODY> 
</HTML> 


单 击 链接 ， 弹 出 一 个 消息 对 话 框 如 图 2-9 所 示 。 
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总 演示 使 用 alert0 的 使 用 所 
文 作 (F) 。 骗 得 [E) 查看 (V) 收藏 去 (A) 











点 击 试 一 下 














图 2-9 演示 alert0 的 使 用 


2. confirm() 函 数 
confirm() 函 数 用 于 显示 一 个 请 求 确认 对 话 框 ， 包 含 一 个 “确定 ”按钮 和 一 个 “取消 ” 
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按钮 。 在 程序 中 ， 可 以 根据 用 户 的 选择 决定 执行 的 操作 ，confirm() 函 数 的 语法 如 下 : 
confirm (str); 


【 例 2-20】 使 用 confirm 0 函数 弹出 一 个 确认 对 话 框 的 例子 。 


<HTML> 
<HEAD><TITLE> 演 示 使 用 Window .confirm() 的 使 用 </TITLE></HEAD> 
<BODY> 
<Script LANGUAGE = JavaScript> 
function Checkme () 
{ 
if (confirm(" 是 否 确定 删除 数据 2") == true) 
alert ("成 功 删除 数据 ") ; 
else 
alert ("没有 删除 数据 ") ; 
} 
</Script> 
<p><a href=# onclick="Checkme () "> 删除 数据 </a></p> 
</BODY> 
</HTML> 


单 击 链接 ， 弹 出 一 个 确认 对 话 框 如 图 2-10 所 示 。 

3. parseFloat() 函 数 

parseFloat() 函 数 用 于 将 字符 串 转 换 成 浮 点 数字 形式 。 语 法 
如 下 : 


parseFloat (str) 


参数 str 是 待 解析 的 字符 串 ， 函 数 返回 解析 后 的 数字 。 
【 例 2-21】 parseFloat() 函 数 示例 。 图 2-10 确认 对 话 框 





<HTML> 

<HEAD><TITLE>parseFloat () 函数 </TITLE></HEAD> 
<BODY> 

<Script LANGUAGE = JavaScript> 

document .write (parseFloat ("12.3")+1); 
</Script> 

</BODY> 

</HTML> 


浏览 的 结果 如 下 : 
1 


4. parselnt () 函 数 
parseInt () 函 数 用 于 将 字符 串 转换 成 整 型 数字 形式 。 语 法 如 下 : 
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parseInt (str, radix) 


参数 str 是 待 解析 的 字符 串 ， 参 数 radix 可 选 ， 表 示 要 解析 的 数字 的 进 制 。 该 值 范围 为 


2 一 36。 如 果 省 略 该 参数 或 其 值 为 0， 则 数字 将 以 十 进 制 来 解析 。 函 数 返 回 解析 后 的 数字 。 


【 例 2-22】 parseInt 0 函数 示例 。 


<HTML> 

<HEAD><TITLE>parseInt () 函数 </TITLE></HEAD> 
<BODY> 

<Script LANGUAGE = JavaScript> 
parseInt ("10"); 

document .write ("<br />"); 

parseInt ("f", 16); // 十 六 进 制 
document .write("<br />") 7 

parseInt ("010", 2); // 二 进 制 
</Script> 

</BODY> 

</HTML> 


浏览 的 结果 如 下 : 


10 
15 

2 

5. prompt() 函 数 

prompt() 函 数 指定 用 于 显示 可 提示 用 户 输入 的 对 话 框 ， 该 对 话 框 包含 一 个 “确定 ” 按 
一 个 “取消 ”按钮 和 一 个 文本 框 。prompt(O) 函 数 的 语法 如 下 : 


prompt (text, defaultText); 


参数 text 指定 要 在 对 话 框 中 显示 的 纯 文本 ， 参 数 defaultText 指定 默认 的 输入 文本 。 如 


果 用 户 单 击 “ 确 定 ” 按 钮 ， 则 prompt() 函 数 返 回 输入 字段 当前 显示 的 文本 ; 如 果 用 户 单 击 
“取消 ”按钮 ， 则 promptO 函 数 返 回 null。 





【 例 2-23】 prompt0 函 数 示 例 。 


<HTML> 
<HEAD><TITLE> 演 示 prompt () 的 使 用 </TITLE></HEAD> 
<BODY> 
<Script LANGUAGE = JavaScript> 
function Input() { 
var MyStr = prompt ("请 输入 您 的 姓名 ") ; 
alert ("您 的 姓名 是 : " + MySstr); 
} 
Input (); 
</Script> 
<br/> 


</BODY> 
</HTML> 
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浏览 的 结果 为 如 图 2-11 所 示 的 提示 用 户 输入 的 对 话 框 。 





取消 








2-11 ”提示 用 户 输入 的 对 话 框 


调试 JavaScript 程序 的 方法 
例如 ， 下 面 就 是 一 个 有 错误 的 JavaScript 程序 : 


<HTML> 


<HEAD><TITLE> 有 js 错误 的 网 页 </TITLE></HEAD> 


<BODY> 


<Script Language ="JavaSscript"> 


windows.alert ("hello"); 
</Script> 


</BODY> 
</HTML> 


调试 JavaScript 程序 通常 包含 下 面 两 项 任务 : 
(1) 查看 程序 中 变量 的 值 。 通 常 可 以 使 用 document write0 方 法 或 alert0 方 法 输出 变量 


的 值 。 


(2) 定位 JavaScript 程序 中 的 错误 。 因 为 JavaScript 程序 多 运行 于 浏览 器 ， 所 以 可 以 借 
助 各 种 浏览 器 的 开发 人 员工 具 分 析 和 定位 JavaScript 程序 中 的 错误 。 

@) 借助 正 (Intemet Explorer) 的 开发 人 员工 具 定位 JavaScript 程序 中 的 错误 。 

打开 下， 然后 选择 “工具 ”| “F12 开发 人 员工 具 ” 菜 单项 ， 或 按 下 F12 键 即 可 打开 开 
发 人 员工 具 窗口 ， 然 后 在 开发 人 员工 具 窗 口中 打开 “控制 台 ” 选 项 卡 ， 可 以 看 到 网 页 中 错 


误 的 位 置 和 明细 信息 ， 如 图 2-12 所 示 。 


理性 


控制 台 





I@1 





IA? 





@1 





加 











xX 


和 Dow7e11: 此 页 上 的 代码 禁用 了 反 向 和 正 向 生存 。 有 关 详细 信息 ， 请 参阅 : http://go.microsoft.com/fwlink/3LinkID=291337 
Xf 1 





图 2-12 在 正 的 “控制 台 ” 选 项 卡 中 查看 网 页 中 错误 的 信息 


@ 借助 Chrome 的 开发 者 工具 定位 JavaScript 程序 中 的 错误 。 
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打开 Chrome， 然 后 选择 “工具 ”|“ 开 发 者 工具 ”菜单 项 ， 会 在 网 页 内 容 下 面 打开 开 
发 者 工具 窗口 ， 这 种 布局 更 利于 对 照 网 页 内 容 进 行 调试 。 例如， 浏览 前 面 介绍 的 有 错误 的 
JavaScript 程序 网 页 ， 然 后 在 开发 者 工具 窗口 中 打开 Console 选项 卡 ， 可 以 看 到 网 页 中 错误 
的 位 置 和 明细 信息 ， 如 图 2-13 所 示 。 
Q 日 Bements Network Sources Timeline profles Resources Audits EGG 01 汪 帝 日,* 


© YF <topframe> v 目 preservelog 
© Uncaught ReferenceError: windows is not defined 


I 











图 2-13 在 Chrome 的 Console 选项 卡 中 查看 网 页 中 错误 的 信息 
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JavaScript 事件 处 理 





用 户 可 以 通过 多 种 方式 与 浏览 器 中 的 页 面 进行 交互 ， 而 事件 是 交互 的 桥梁 。Web 应 用 
程序 开发 人 员 通 过 JavaScript 脚本 内 置 的 和 自 定义 的 事件 处 理 器 来 响应 用 户 的 动作 ， 就 可 
以 开发 出 更 具 交互 性 、 动 态 性 的 页 面 。 

本 章 主要 介绍 JavaScript 脚本 中 的 事件 处 理 的 概念 、 方法 , 列 出 了 JavaScript 预定 义 
的 事件 处 理 器 ， 并 且 介 绍 了 如 何 编写 用 户 自 定义 的 事件 处 理 函 数 以 及 如 何 将 它们 与 页 面 中 
用 户 的 动作 相关 联 ， 以 得 到 预期 的 交互 性 能 。 


JavaScript 事件 的 基本 概念 


所 谓 事 件 ， 是 指 JavaScript 捕获 到 用 户 的 操作 ， 并 做 出 正确 的 响应 。 例 如 ， 用 户 单 击 
鼠标 弹出 一 个 窗口 ， 把 鼠标 移动 到 某 个 元 素 上 产生 变化 。 事 件 处 理 是 JavaScript 的 一 个 优 
势 ， 可 以 很 方便 地 针对 某 个 HIML 事件 编写 程序 进行 处 理 。 

? 3.1.1 事件 类 型 


JavaScript 支持 丰富 的 事件 类 型 ， 能 使 Web 开发 更 加 快速 和 简洁 。JavaScript 所 支持 的 
事件 可 以 分 为 以 下 几 类 。 

1. 窗口 事件 (Window Events) 

仅 在 body 和 frameset 元 素 中 有 效 ， 窗 口 事 件 如 表 3-1 所 示 。 





表 3-1 窗口 事件 
事件 说 明 
onload 当 网 页 被 载 入 时 执行 脚本 
onunload 当 网 页 被 关闭 时 执行 脚本 


2. 表单 元 素 事件 (Form Element Events) 
仅 在 表单 元 素 中 有 效 ， 表 单元 素 事件 如 表 3-2 所 示 。 


表 3-2 表单 元 素 事件 





事件 说 明 

onchange 当 元 素 〈 文 本 框 、 复 选 框 等 ) 改变 时 执行 脚本 
onsubmit 当 表 单 form) 被 提交 时 执行 脚本 

onreset 当 表单 被 重 置 时 执行 脚本 

onselect 当 元 素 被 选取 时 执行 脚本 

onblur 当 元 素 失去 焦点 时 执行 脚本 


onfocus 当 元 素 获得 焦点 时 执行 脚本 
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3. 图 像 事 件 (Image Events) 
该 属性 可 用 于 img 元 素 ， 图 像 事 件 如 表 3-3 所 示 。 


表 3-3 ”图像 事件 
事件 说 明 
onabort 当 图 像 加 载 中 断 时 执行 脚本 


4. 键盘 事件 (Keyboard Events) 
在 下 列 元 素 中 无 效 : base、 bdo、 br、 frame、 frameset、 head、 html、 iframe、meta、 param、 
script、style 以 及 title 元 素 ， 键 盘 事 件 如 表 3-4 所 示 。 





表 3-4 键盘 事件 
事件 说 明 
onkeydown 当 键盘 被 按 下 时 执行 脚本 
onkeypress 当 键 盘 被 按 下 后 又 松 开 时 执行 脚本 
onkeyup 当 键 盘 被 松 开 时 执行 脚本 


5. 鼠标 事件 (Mouse Events) 
在 下 列 元 素 中 无 效 : base、 bdo、br、 frame、frameset、 head、html、 iframe、meta、 param、 
script、style 以 及 title 元 素 ， 鼠 标 事件 如 表 3-5 所 示 。 


表 3-5 鼠标 事件 
事件 说 明 
onclick 当 鼠 标 被 单 击 时 执行 脚本 
ondblclick 当 鼠 标 被 双击 时 执行 脚本 
onmousedown 当 鼠 标 按钮 被 按 下 时 执行 脚本 
onmousemove 当 鼠 标 指针 移动 时 执行 脚本 
onmouseout 当 鼠 标 指针 移出 某 元 素 时 执行 脚本 
‘onmouseover 当 鼠 标 指针 悬 停 于 某 元 素 之 上 时 执行 脚本 
onmouseup 当 鼠 标 按钮 被 松 开 时 执行 脚本 


“3.1.2 .JavaScript 处 理事 件 的 基本 机 制 


JavaScript 处 理事 件 的 基本 机 制 如 下 : 

(1) 对 DOM 元 素 绑 定 事件 处 理 函 数 ; 

(2) 监听 用 户 的 操作 ; 

(3) 当 用 户 在 相应 的 DOM 元 素 上 进行 与 绑 定 事件 对 应 的 操作 时 , 事件 处 理 函数 做 出 响应 ; 
(4) 将 处 理 结果 更 新 到 HIML 文档 。 

JavaScript 处 理事 件 的 过 程 如 图 3-1 所 示 。 





入 用户 动作 pe 下 


一 dl 
1 nk 
浏览 器 将 处 理 结 = 二 


果 呈献 给 用 户 响应 。 JavaSeri 
用 户 I 浏览 器 让 


图 3-1 JavaScript 处 理事 件 的 基本 机 制 
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JavaScript 绑 定 事件 的 方法 


JavaScript 事件 一 般 与 DOM 元 素 绑 定 。 要 想 让 JavaScript 对 用 户 的 操作 作出 响应 ， 
首先 要 对 DOM 元 素 绑 定 事件 处 理 函 数 。 所 谓 事 件 处 理 函数 ， 就 是 处 理 用 户 操作 的 函数 ， 
不 同 的 操作 对 应 不 同 的 名 称 。 

在 JavaScript 中 ， 有 以 下 三 种 常用 的 绑 定 事件 的 方法 。 

1. 在 DOM 元 素 中 直接 绑 定 

这 里 的 DOM 元 素 可 以 理解 为 HTML 标记 。JavaScript 支持 在 标记 中 直接 绑 定 事件 ， 
语法 为 : 

OnXXX="JavaScript Code" 


其 中 onXXX 为 事件 名 称 。 例 如 ， 鼠 标 单 击 事件 onclick， 鼠 标 双 击 事件 ondouble， 鼠 
标 移入 事件 onmouseover， 鼠 标 移出 事件 onmouseout 等 。 

JavaScript Code 为 处 理事 件 的 JavaScript 代码 ， 一 般 是 函数 。 

例如 ， 单 击 一 个 按钮 ， 弹 出 警告 框 的 代码 有 如 下 两 种 写法 。 

(1) 原生 函数 


<input onclick="alert (' 谢 谢 支 持 ')" type="button" value=" 单 击 我 ， 弹 出 警告 框 " /> 
(2) 自 定义 函数 


<input onclick="myAlert()" type="button" value=" 单 击 我 ， 弹 出 警告 框 " /> 
<script type="text/javascript"> 
function myAlert (){ 
alert ("谢谢 支持 ") ; 
} 
</script> 


2. 在 JavaScript 代码 中 绑 定 

在 JavaScript 代码 中 〈 即 <scrip 人 标记 内 ) 绑 定 事件 可 以 使 JavaScript 代码 与 HIML 标 
记分 离 ， 文 档 结构 清晰 ， 便 于 管理 和 开发 。 

在 JavaScript 代码 中 绑 定 事件 的 语法 为 : 


elementObject .onXXX=function ()1{ 


// 事 件 处 理 代 码 
} 


其 中 elementObject 为 DOM 对 象 ， 即 DOM 元 素 。onXXX 为 事件 名 称 。 
例如 ， 为 id-"demo" 的 按钮 绑 定 一 个 事件 ， 显 示 它 的 type 属性 : 


<input id="demo" type="button" value=" 单 击 我 ， 显 示 type 属性 " /> 
<script type="text/javascript"> 
document .getElementById ("demo") .onclick=function(){ 
alert (this.getAttribute ("type") ) ;//this 指 当前 发 生 事件 的 HTML 元 素 ， 这 里 是 
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<input> 标 记 
} 
</script> 


3. 绑 定 事件 监听 函数 
绑 定 事 件 的 另 一 种 方法 是 用 addEventListener() 或 attachEvent() 来 绑 定 事件 监听 函数 。 
addEventListener() 函 数 的 语法 : 


elementObject .addEventListener (eventName, handle, useCapture); 


addEventListener() 的 参数 如 表 3-6 所 示 。 


表 3-6 addEventListener0 的 参数 








参数 说 明 
elementObject DOM 对 象 ( 即 DOM 元 素 ) 
eventName 事件 名 称 。 注 意 ， 这 里 的 事件 名 称 没有 "on"， 如 鼠标 单 击 事件 click， 鼠 标 双击 事 
件 doubleclick， 鼠 标 移入 事件 mouseover， 鼠 标 移出 事件 mouseout 等 
handle 事件 句柄 函数 ， 即 用 来 处 理事 件 的 函数 
useCapture Boolean 类 型 ， 是 否 使 用 捕获 ， 一 般 用 false。 这 涉及 JavaScript 事件 流 的 概念 
attachEvent() 函 数 的 语法 : 


elementObject .attachEvent (eventName, handle); 
attachEvent() 的 参数 如 表 3-7 所 示 。 
表 3-7 attachEvent0 的 参数 


参数 说 明 

elementObject DOM 对 象 ( 即 DOM 元 素 ) 

eventName 事件 名 称 。 注 意 ， 与 addEventListener0 不 同 ， 这 里 的 事件 名 称 有 "on"， 如 鼠标 单 击 
事件 onclick， 鼠 标 双击 事件 ondoubleclick， 鼠 标 移入 事件 onmouseover， 鼠 标 移出 
事件 onmouseout 等 

handle 事件 句柄 函数 ， 即 用 来 处 理事 件 的 函数 


注意 : 事件 句柄 函数 是 指 “ 函 数 名 "， 不 能 带 小 括号 。 

addEventListener() 是 标准 的 绑 定 事件 监听 函数 的 方法 ， 是 W3C 所 支持 的 ，Chrome、 
FireFox、Opera、Safari、IE 9.0 及 其 以 上 版 本 都 支持 该 函数 ， 但 是 ，IE 8.0 及 其 以 下 版 本 不 
支持 该 方法 ， 它 使 用 attachEvent() 来 绑 定 事件 监听 函数 。 所 以 ， 这 种 绑 定 事件 的 方法 必须 
要 处 理 浏览 器 兼容 问题 。 

下 面 绑 定 事件 的 代码 进行 了 兼容 性 处 理 ， 能 够 被 所 有 浏览 器 支持 : 


function addEvent (obj,type,handle){ 
try{ //Chrome、FireFox、Opera、Safari、IE 9.0 及 其 以 上 版 本 
obj .addEventListener (type, handle, false) 
}catch (e)f{ 
try{ //IE 8.0 及 其 以 下 版 本 
obj .attachEvent ('on' + type,handle); 
}catch (e){ // 早 期 浏览 器 
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obj ['on' + type] = handle; 


这 里 使 用 try{ … } catch(e){ .… } 代 蔡 下 …else… 语 句 ， 避 免 浏 览 器 出 现 错误 提示 。 
例如 ， 为 一 个 id-"demo" 的 按钮 绑 定 事件 ， 鼠 标 单 击 时 弹出 警告 框 : 


addEvent (document .getElementById ("demo"),"click",myAlert); 





function myAlert (){ 
alert ("又 是 一 个 警告 框 ") ; 
} 


JavaScript 事件 的 event 对 象 


event 对 象 是 JavaScript 中 一 个 非常 重要 的 对 象 ， 用 来 表示 当前 事件 。event 对 象 的 属 
性 和 方法 包含 了 当前 事件 的 状态 。event 对 象 只 在 事件 发 生 的 过 程 中 才 有 效 。 

当前 事件 ， 是 指正 在 发 生 的 事件 ， 状 态 ， 是 与 事件 有 关 的 性 质 ， 如 引发 事件 的 DOM 
元 素 、 鼠 标的 状态 、 按 下 的 键 等 。 
?3.3.1 获取 event 对 象 


在 W3C 规范 中 , event 对 象 是 随 事件 处 理 函 数 传 入 的 , Chrome、 FireFox、Opera、 Safari、 
了 9.0 及 其 以 上 版 本 都 支持 这 种 方式 ; 但 是 对 于 正 8.0 及 其 以 下 版 本 ，event 对 象 必须 作为 
window 对 象 的 一 个 属性 。 

在 遵循 W3C 规范 的 浏览 器 中 ，event 对 象 通过 事件 处 理 函 数 的 参数 传 入 。 


elementObject .OnxXxx=function (e){ 
var eve=e; // 声 明 一 个 变量 来 接收 event 对 象 
} 


上 面 绑 定 的 事件 处 理 函 数 中 ， 参 数 e 用 来 传 入 event 对 象 。 
例如 ， 要 取得 发 生 事件 时 鼠标 的 坐标 ， 可 以 这 样 写 : 


<div id="demo"> 在 这 里 单 击 </div> 
<script type="text/javascript"> 
document .getElementById ("demo") .onclick=function (e){ 
Var eve=e; 
Var x=eve.x; //X 坐 标 
var y=eve.y; //Y 坐标 
alert ("X 坐标 : "+x+"\nY 坐标 : "+y); 
} 
</script> 


对 于 正 8.0 及 其 以 下 版 本 ，event 必须 作为 window 对 象 的 一 个 属性 。 


elementObject .OnXXX=function(){ 
var eve=window-event; // 声 明 一 个 变量 来 接收 event 对 象 
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} 
可 以 看 出 ， 要 想 获取 与 当前 事件 有 关 的 状态 ， 比 如 发 生 事件 的 DOM 元 素 、 鼠 标 坐标 、 
键盘 按键 等 ， 就 要 处 理 浏览 器 的 兼容 问题 ， 典 型 代码 如 下 : 


elementObject .OnXXX=function(e){ 
var eve = e || window.event; // 使 用 11 运算 取得 event 对 象 
} 


“3.3.2 JavaScript 获取 鼠标 坐标 本 


鼠标 坐标 包括 X 坐标 、Y 坐标 、 相 对 于 浏览 器 客户 端的 坐标 、 相 对 于 屏幕 的 坐标 等 。 
在 JavaScript 中 ， 鼠 标 坐 标 是 作为 event 对 象 的 属性 存在 的 。event 对 象 中 有 关 鼠 标 坐标 的 


属性 如 表 3-8 和 表 3-9 所 示 。 
表 3-8 W3C 规范 所 规定 的 属性 
属性 描述 
clientX 鼠标 指针 相对 客户 端 〈 即 浏览 器 文档 区 域 ) 的 水 平 坐标 
clientY 鼠标 指针 相对 客户 端 〈 即 浏览 器 文档 区 域 ) 的 垂直 坐标 
ScreenX 鼠标 指针 相对 计算 机 屏幕 的 水 平 坐标 
screenY 鼠标 指针 相对 计算 机 屏幕 的 垂直 坐标 
表 3-9 IE 浏览 器 的 特有 属性 
属性 描述 
offsetX 发 生 事件 的 地 点 在 事件 源 元 素 的 坐标 系统 中 的 水 平 坐标 
offsetY 发 生 事件 的 地 点 在 事件 源 元 素 的 坐标 系统 中 的 垂直 坐标 
x 事件 发 生 的 位 置 的 水 平 坐 标 ， 它 们 相对 于 用 CSS 动态 定位 的 最 内 层 包容 元 素 
y 事件 发 生 的 位 置 的 垂直 坐标 ， 它 们 相对 于 用 CSS 动态 定位 的 最 内 层 包容 元 素 
【 例 3-1】 获取 鼠标 的 坐标 信息 。 
<html> 
<head> 
<title> 获 取 鼠 标的 坐标 信息 </title> 
</head> 
<body> 


<div id="demo"> 单 击 这 里 </div> 
<script type="text/javascript"> 
document .getElementById ("demo") .onclick=function (e){ 
var eve = e || window.event; 
var x = eve.clientX， // 相 对 于 客户 端的 X 坐标 
y = eve.-clientY， // 相 对 于 客户 端的 Y 坐标 
Xl = eve.screenX， // 相 对 于 计算 机 屏幕 的 X 坐标 
yl = eve.screenY; // 相 对 于 计算 机 屏幕 的 Y 坐标 
alert( 
"相对 客户 端的 坐标 : \n"+ 


mx = x+t"\n"+ 
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vw = w+y+"\n\n™+ 
"相对 屏幕 的 坐标 : \n"+ 
vx = wixl+"\n"+ 
wy = "+yl 
); 
} 
</script> 
</body> 
</html> 


3.3.3 ”JavaScript 获取 事件 源 


事件 源 是 指 发 生 事件 的 DOM 节点 (HTML 元 素 )。 

事件 源 是 作为 event 对 象 的 属性 存在 的 。 在 W3C 规范 中 , 这 个 属性 是 target ; 但 是 正 
8.0 及 其 以 下 版 本 不 支持 该 属性 ， 它 使 用 srcElement 属性 来 获取 事件 源 。 

【 例 3-2】 获取 事件 源 。 


<html> 
<head> 
<title> 获 取 事 件 源 </title> 
</head> 
<body> 
<div id="demo"> 单 击 这 里 </div> 
<script type="text/javascript"> 
document .getElementById ("demo") .onclick=function (e){ 
Var eve = e || window.event; 
var srcNode = eve.target || eve.srcElement; // 兼 容 所 有 浏览 器 
alert (srcNode); 
} 
</script> 
</body> 
</html> 


JavaScript 取消 浏览 器 默认 动作 


默认 动作 是 指 浏览 器 所 执行 的 用 户 没 有 明确 指定 的 操作 。 对 于 某 些 HTML 标记 , 浏览 
器 总 会 有 一 个 默认 的 动作 。 浏 览 器 的 默认 动作 是 可 以 通过 JavaScript 来 取消 的 。 

例如 : <a hre 伍 "http://www.baidu.com" target=" blank"> 单 击 这 里 进入 百度 </a><br> 

单 击 上 面 的 链接 ， 浏 览 器 会 弹出 窗口 ， 进 入 百度 首页 。 这 个 动作 就 是 浏览 器 的 默认 动 
作 ， 单 击 一 个 <a> 标 记 会 转向 目标 页 面 。 

其 他 浏览 器 默认 动作 包括 : 单 击 提交 按钮 提交 表单 、 单 击 重 置 按钮 重 置 表单 、 把 鼠标 
移动 到 带 有 title 属性 的 元 素 上 出 现 提 示 等 。 

对 于 遵循 W3C 规范 的 浏览 器 , 使 用 event 对 象 的 preventDefault() 方 法 来 取消 默认 动作 ; 
但 是 下 8.0 及 其 以 下 版 本 不 支持 该 方法 ， 它 通过 对 event 对 象 的 retumValue 属性 赋值 false 
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来 取消 默认 动作 。 
【 例 3-3】 取消 <a> 标 记 的 默认 动作 。 


<html> 
<head> 
<title> 取 消 <a> 标 记 的 默认 动作 </title> 
</head> 
<body> 
<a id="demo" href="http://www.baidu.com"” target=" blank"> 单 击 这 里 试 试 </a> 
<script type="text/javascript"> 
document .getElementById ("demo") .onclick=function (e){ 
Var eve = e || window.event; 
try{ // 使 用 try. . .catch 语句 避免 浏览 器 出 现 错误 提示 
eve.preventDefault (); // 非 IE 浏览 器 
}catch(e){ 
eve.returnValue = false; //IE 8.0 及 其 以 下 版 本 
} 
F 
</script> 
</body> 
</html> 


浏览 页 面 ， 单 击 <a> 标 记 给 的 链接 地 址 本 来 会 跳 转 到 百度 首页 , 但 是 用 JavaScript 取消 
了 跳 转 ， 所 以 单 击 后 没 效果 。 
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JavaScript 脚本 是 面向 对 象 (Object-based) 的 编程 语言 ， 它 可 以 将 属性 和 代码 集成 在 
一 起 ， 定 义 为 类 ， 从 而 使 程序 设计 更 加 简单 、 规 范 、 有 条 理 。 通 过 对 象 的 访问 可 大 大 简化 
JavaScript 程序 的 设计 ， 并 提供 直观 、 模 块 化 的 方式 进行 脚本 程序 开发 。 本 章 主要 介绍 
JavaScript 的 面向 对 象 编程 思想 以 及 有 关 对 象 的 基本 概念 , 并 引导 读者 创建 和 使 用 自 定义 的 
类 和 对 象 。 


面向 对 象 程序 设计 思想 简介 
?4.1.1 对 象 的 概念 


对 象 是 客观 世界 存在 的 人 、 事 和 物体 等 实体 。 现 实生 活 中 存在 很 多 的 对 象 ， 比 如 猫 、 
自行 车 等 。 不 难 发 现 它们 有 两 个 共同 特征 : 都 有 状态 和 行为 。 比 如 猫 有 自己 的 状态 (名字 、 
颜色 、 饥 饿 与 否 等 ) 和 行为 〈 疏 树 、 抓 老鼠 等 )。 汽 车 也 有 自己 的 状态 〈 档 位 、 速 度 等 ) 和 
行为 《和 刹车、 加速 、 减 速 、 改 变 档 位 等 )。 若 以 自然 人 为 例 ， 构 造 一 个 对 象 ， 可 以 用 图 4-1 
来 表示 ， 其 中 属性 Attribute 表示 对 象 状态 ， 动 作 (方法) Method 表示 对 象 行为 。 


动作 (方法 ) 









图 4-1 以 自然 人 构造 的 对 象 


以 HIML 文档 中 的 document 作为 一 个 对 象 ， 如 图 4-2 所 示 。 

综 上 所 述 ， 凡 是 能 够 提取 一 定 度量 数据 并 能 通过 某 种 途径 对 度量 数据 实施 操作 的 客观 
存在 都 可 以 构成 一 个 对 象 ， 且 用 属性 来 描述 对 象 的 状态 ， 使 用 方法 和 事件 来 处 理 对 象 的 各 
种 行为 。 下 面 介绍 一 些 概 念 。 

对 象 (Object): 面向 对 象 程序 设计 思想 可 以 将 一 组 数据 和 与 这 组 数据 有 关 的 操作 组 装 
在 一 起 ， 形 成 一 个 实体 ， 这 个 实体 就 是 对 象 。 
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Attribute 





4-2 以 HIML 文档 中 的 document 构造 的 对 象 


属性 : 用 来 描述 对 象 的 状态 。 通 过 定义 属性 值 ， 可 以 改变 对 象 的 状态 。 如 图 4-1 中 ， 
可 以 定义 height 表示 该 自然 人 的 身高 ， 字 符 串 HungryOrNot 表示 该 自然 人 肚子 的 状态 ， 
HungryOrNot 成 为 自然 人 的 某 个 属性 。 

方法 : 也 称 为 成 员 函 数 ， 是 指 对 象 上 的 操作 。 如 图 4-1 中 ， 可 以 定义 方法 Eat( ) 来 处 理 
自然 人 肚子 很 饿 的 情况 ，Eat( ) 成 为 自然 人 的 某 个 方法 。 

事件 : 由 于 对 象 行为 的 复杂 性 ， 对 象 的 某 些 行为 需要 用 户 根据 实际 情况 来 编写 处 理 该 
行为 的 代码 ， 该 代码 称 为 事件 。 在 图 4-1 中 ,可 以 定义 事件 DrinkBeforeEat( ) 来 处 理 自然 人 
肚子 很 饿 同时 嘴巴 很 渴 需 要 先 喝 水 后 进食 。 








面向 对 象 编程 (OPP) 是 一 种 计算 机 编程 架构 ， 具 有 三 个 最 基本 的 特点 : 封装 、 重 用 
性 (继承 )、 多 态 。 面 向 对 象 编程 主要 包含 以 下 重要 的 概念 : 

(1) 类 (class): 具有 相同 或 相似 性 质 的 对 象 的 抽象 就 是 类 。 因 此 ， 对 象 的 抽象 是 类 ， 
类 的 实例 化 就 是 对 象 。 例 如 ， 如 果 人 类 是 一 个 类 ， 则 一 个 具体 的 人 就 是 一 个 对 象 。 

(2) 封装 ， 将 数据 和 操作 捆绑 在 一 起 ， 定 义 一 个 新 类 的 过 程 就 是 封装 。 

(3) 继承 : 类 之 间 的 关系 ， 在 这 种 关系 中 ， 一 个 类 共享 了 一 个 或 多 个 其 他 类 定义 的 属 
性 和 行为 。 继 承 描述 了 类 之 间 的 关系 。 子 类 可 以 对 基 类 的 行为 进行 扩展 、 覆 盖 、 重 定义 。 
如 果 人 类 是 一 个 类 ， 则 可 以 定义 一 个 子 类 “男人 ”“ 男 人 ”可 以 继承 人 类 的 属性 〈 例 如 姓 
名 、 身 高 、 年 龄 等 ) 和 方法 《〈 即 动作 ， 例 如 吃饭 和 走路 )， 在 子 类 中 就 无 须 重复 定义 了 。 

(4) 多 态 : 从 同一 个 类 中 继承 得 到 的 子 类 也 具有 多 态 性 ， 即 相同 的 函数 名 在 不 同 子 类 
中 有 不 同 的 实现 。 就 如 同 子女 会 从 父母 那里 继承 到 人 类 共有 的 特性 ， 而 子女 也 具有 自己 的 
特性 。 

实际 上 ，JavaScript 语言 是 通过 一 种 叫 作 原型 (prototype) 的 方式 来 实现 面向 对 象 编程 
的 。 下 面 就 来 讨论 基于 类 的 〈class-based) 面向 对 象 和 基于 原型 的 〈prototype-based) 面向 
对 象 这 两 种 方式 在 构造 客观 世界 的 方式 上 的 差别 。 

在 基于 类 的 面向 对 象 方式 中 ， 对 象 依靠 类 来 产生 。 而 在 基于 原型 的 面向 对 象 方式 中 ， 
对 象 则 是 依靠 构造 函数 〈constructor) 利用 原型 构造 出 来 的 。 

举 个 客观 世界 的 例子 来 说 明 两 种 方式 的 差异 。 例 如 工厂 造 一 辆 车 ， 一 方面 ， 工 人 必须 
参照 一 张 工程 图 纸 ， 设 计 规 定 这 辆 车 应 该 如 何 制 造 。 这 里 的 工程 图 纸 就 好 比 是 编程 语言 
的 类 ， 而 车 就 是 按照 这 个 类 制造 出 来 的 ， 另 一 方面 ， 在 基于 原型 的 面向 对 象 方式 中 ， 工 人 
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和 机 器 (相当 于 constructor) 利用 各 种 零 部 件 如 发 动机 、 轮 胎 、 方 向 盘 〈 相 当 于 prototype 
的 各 个 属性 ) 将 汽车 构造 出 来 。 


JavaScript 类 的 定义 和 实例 化 


严格 地 说 ，JavaScript 是 基于 对 象 的 编程 语言 ， 而 不 是 面向 对 象 的 编程 语言 。 在 面向 
对 象 的 编程 语言 中 〈 如 Java、C++、C#、PHP 等 )， 声 明 一 个 类 使 用 class 关键 字 。 
例如 : 


public class Person 
{ 
} 


但 是 在 JavaScript 中 ， 没 有 声明 类 的 关键 字 ， 也 没有 办 法 对 类 的 访问 权限 进行 控制 。 
JavaScript 使 用 函数 来 定义 类 。 
?4.2.1 类 的 定义 


类 定义 的 语法 : 


function className (){ 
// 具 体操 作 


例如 ， 定 义 一 个 Person 类 : 


function Person() { 
this.name=" 张 三 "; // 定 义 一 个 属性 name 
this.sex=" 男 "; // 定 义 一 个 属性 sex 
this.say=function(){ // 定 义 一 个 方法 say () 
document .write ("我 的 名 字 是 " + this.name + " ,性别 是 " + this.sex + "。"); 
} 
} 


说 明 : this 关键 字 是 指 当前 的 对 象 。 








创建 对 象 的 过 程 也 是 类 实例 化 的 过 程 。 
在 JavaScript 中 ， 创 建 对 象 〈 即 类 的 实例 化 ) 使 用 new 关键 字 。 
创建 对 象 的 语法 : 


new className () 7 


将 上 面 的 Person 类 实例 化 : 


Var zhangsan=new Person(); 


zhangsan.say(); 


运行 代码 ， 输 出 如 下 内 容 : 
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大 家 好 ， 我 的 名 字 是 张 三 ， 性 别 是 男 。 


定义 类 时 可 以 设置 参数 ， 创 建 对 象 时 也 可 以 传递 相应 的 参数 。 
下 面 ， 我 们 将 Person 类 重新 定义 : 


function Person (name, sex) { 
this.name=name; // 定 义 一 个 属性 name 
this.sex=sex; // 定 义 一 个 属性 sex 
this.say=function(){ // 定 义 一 个 方法 say () 
document .write ("大 家 好 , 我 的 名 字 是 "+this.name+"，, 性 别 是 "+this.sex); 
} 





} 
var zhangsan=new Person ("小 丽 ", " 女 "); 
zhangsan.say(); 


运行 代码 ， 输 出 如 下 内 容 : 

大 家 好 ， 我 的 名 字 是 小 丽 ， 性 别 是 女 。 

当 调 用 该 构造 函数 时 ,浏览 器 给 新 的 对 象 zhangsan 分 配 内 存 ， 并 隐 性 地 将 对 象 传递 给 
函数 。this 操作 符 指向 新 对 象 引用 ， 用 于 操作 这 个 新 对 象 。 例 如 下 面 的 语句 : 

this.name=name; // 赋 值 右 侧 是 函数 参数 传递 过 来 的 name 


该 句 使 用 作为 函数 参数 传递 过 来 的 name 值 在 构造 函数 中 给 该 对 象 zhangsan 的 name 
属性 赋值 。 对 象 实例 的 name 属性 被 定义 和 赋值 后 ， 就 可 以 访问 该 对 象 实例 的 name 属性 。 





通过 直接 初始 化 对 象 来 创建 对 象 ， 与 定义 对 象 的 构造 函数 方法 不 同 的 是 ， 该 
要 new 生成 此 对 象 的 实例 ， 改 写 zhangsan 对 象 : 


<script> 
// 直 接 初 始 化 对 象 
var zhangsan={ 
name: " 张 三 ", 
sex:" 男 攻 
say:function (){// 定 义 对 象 的 方法 
document .write (" 大 家 好 ， 我 的 名 字 是 " + this .name + " ， 性 别 是 " + this.sex);} 
} 
zhangsan.say(); 
</scripts> 


可 以 通过 对 象 直接 初始 化 创建 一 个 “名 字 / 值 ”对 列表 ， 每 个 “名 字 / 值 ”对 之 间 用 去 
号 分 隔 ， 最 后 用 一 个 大 括号 括 起 来 “名字 / 值 ”对 表示 对 象 的 一 个 属性 或 方法 ， 名 和 值 之 
间 用 冒号 分 隔 。 

上 面 的 zhangsan 对 象 也 可 以 这 样 来 创建 : 


Var zhangsan={} 
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zhangsan.name = " 张 三 "; 
zhangsan.sex = " 男 "; 


zhangsan.say = function(){ 
return " 畴 ! 大 家 好 ， 我 来 了 。"; 
} 


该 方法 在 只 需 生成 一 个 对 象 实例 并 进行 相关 操作 的 情况 下 使 用 时 ， 代 码 紧 凑 ， 编 程 效 
率 高 ， 但 致命 的 是 ， 若 要 生成 若干 个 对 象 实例 ， 就 必须 为 生成 每 个 对 象 实例 重复 相同 的 代 
码 结构 ， 代 码 的 重用 性 比较 差 ， 不 符合 面向 对 象 的 编程 思路 ， 应 尽量 避免 使 用 该 方法 创建 
自 定义 对 象 。 


JavaScript 访问 和 添加 对 象 的 属性 和 方法 


属性 是 一 个 变量 ， 用 来 表示 一 个 对 象 的 特征 ， 如 颜色 、 大 小 、 重 量 等 ， 方 法 是 一 个 函 
数 ， 用 来 表示 对 象 的 操作 ， 如 奔跑 、 呼 吸 、 跳 跃 等 

对 象 的 属性 和 方法 统称 为 对 象 的 成 员 。 
4.3.1.. 访 问 对 象 的 属性 和 方法 


在 JavaScript 中 ， 可 以 使 用 “ . ”和 “[]” 来 访问 对 象 的 属性 。 
1. 使 用 ”. ”来 访问 对 象 属性 

语法 : 

objectName .propertyName 


其 中 ，objectName 为 对 象 名 称 ，propertyName 为 属性 名 称 。 
2. 使 用 “ [] ”来 访问 对 象 属性 
语法 : 


objectName [propertyName] 


其 中 ，objectName 为 对 象 名 称 ，propertyName 为 属性 名 称 。 
3. 访问 对 象 的 方法 

在 JavaScript 中 ， 只 能 使 用 “ . ”来 访问 对 象 的 方法 。 
语法 : 

objectName .methodName () 


其 中 ，objectName 为 对 象 名 称 ，methodName(0) 为 函数 名 称 。 
【 例 4-1】 创建 一 个 Person 对 象 并 访问 其 成 员 。 


function Person() { 
this.name=" 张 三 "; // 定 义 一 个 属性 name 
this.sex=" 男 "; // 定 义 一 个 属性 sex 
this.age=22; // 定 义 一 个 属性 age 
this .say=function(){ // 定 义 一 个 方法 say () 
return "我 的 名 字 是 " + this.name + " ， 人 性 别 是 " + this.sex + "， 今年 " + 
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this.age +" 岁 !"; 

} 
} 
Var zhangsan=new Person(); 
alert ("姓名 : "+zhangsan.name);  // 使 用 “.” 来 访问 对 象 属性 
alert ("性 别 : "+zhangsan.sex); 
alert ("年 龄 : "+zhangsan["age"]); // 使 用 “[ ] ”来 访问 对 象 属性 
alert (zhangsan.say ()); // 使 用 “.” 来 访问 对 象 方法 


实际 项 目 开发 中 ， 一 般 使 用 “.” 来 访问 对 象 属性 ; 但 是 在 某 些 情况 下 ,使 用 “[]” 会 
方便 很 多 ， 例 如 ，JavaScript 遍历 对 象 属性 和 方法 。 

JavaScript 可 使 用 for in 语句 来 遍历 对 象 的 属性 和 方法 。 for in 语句 循环 遍历 JavaScript 
对 象 ， 每 循环 一 次 ， 都 会 取得 对 象 的 一 个 属性 或 方法 。 

语法 : 

for (valueName in ObjectName){ 


// 代 码 


其 中 ，valueName 是 变量 名 ， 保 存 着 属性 或 方法 的 名 称 ， 每 次 循环 ，valueName 的 值 
都 会 改变 。 
【 例 4-2】 遍历 zhangsan 对 象 的 属性 或 方法 。 


<HTML> 

<HEAD> 

<TITLE> 演 示 访 问 zhangsan 对 象 属性 和 方法 </TITLE> 

</HEAD> 

<BODY> 

<script> 

// 直 接 初始 化 对 象 

Var zhangsan={} 

zhangsan.name = " 张 三 "; 

zhangsan.sex = " 男 "; 

zhangsan.say = function(){ 
return " 咕 ! 大 家 好 ， 我 来 了 。"; 

} 

var strTem=""; // 临 时 变量 

for (value in zhangsan){ 
strTemt+=value+': '+zhangsan[value]+"\n"; 

} 

alert (strTem); 

</script> 

<br/> 

</BODY> 

</HTML> 


第 4 章 JavaScript 面向 对 象 程序 设计 


浏览 器 浏览 结果 如 图 4-3 所 示 。 


| x 





say : function 0{ 
return " 央 ! 大 家 好 ,我 来 了 。"; 
} 





图 4-3 遍历 zhangsan 对 象 的 属性 或 方法 


“4.3.2 向 对 象 添加 属性 和 方法 


JavaScript 可 以 在 定义 类 时 定义 属性 和 方法 ， 也 可 以 在 创建 对 象 以 后 动态 添加 属性 和 
方法 。 动 态 添加 属性 和 方法 在 其 他 面向 对 象 的 编程 语言 (C++、Java 等 ) 中 是 难以 实现 的 ， 
这 是 JavaScript 灵活 性 的 体现 。 

【 例 4-3】 用 Person 类 创建 一 个 对 象 ， 向 其 添加 属性 和 方法 。 


// 定 义 类 
function Person (name, sex) { 
this.name=name; // 定 义 一 个 属性 name 
this.sex=sex; // 定 义 一 个 属性 sex 
this.say=function(){ // 定 义 一 个 方法 say () 
return "大 家 好 ， 我 的 名 字 是 " + this.name + "， 性 别 是 " + this.sex + "。"; 
} 


上 

// 创 建 对 象 

var zhangsan=new Person (" 张 三 "," 男 ") ; 
zhangsan.say(); 


// 动 态 添加 属性 和 方法 
zhangsan.tel="029-81892332"; ”// 动 态 添加 属性 tel 
zhangsan.run=function () { // 动 态 添加 方法 run 


return " 我 跑 得 很 快 ! "; 


} 

// 弹 出 警告 框 

alert ("姓名 : "+zhangsan.name); 
alert ("性 别 : "+zhangsan.sex); 
alert (zhangsan.say ()); 

alert ("电话 : "+zhangsan.tel); 
alert (zhangsan.run()); 


可 见 ，JavaScript 动态 添加 对 象 实例 的 属性 tel 和 方法 ran 过程 十 分 简单 ， 注 意 动态 添 


加 该 属性 仅仅 在 此 对 象 实例 zhangsan 中 才 存在 ， 而 其 他 对 象 实例 不 存在 该 属性 tel 和 方 
法 run。 
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例如 : 

var 1isi=new Person(" 李 四 "," 男 ") ; 

alert (1isi .run());// 出 现 错误 Uncaught TypeError: lisi.run is not a function 
也 可 以 通过 原型 方法 将 某 个 方法 动态 添加 给 所 有 对 象 实例 。 

【 例 4-4】 通过 原型 方法 将 run() 方 法 动态 添加 给 所 有 对 象 实例 。 


// 定 义 类 

function Person (name, sex) { 
this.name=name; // 定 义 一 个 属性 name 
this.sex=sex; // 定 义 一 个 属性 sex 


this.say=function(){ // 定 义 一 个 方法 say () 
return" 大 家 好 ， 我 的 名 字 是 "”+ this .name + "， 性别 是 " + this.sex + "。"; 


} 

// 添 加 原型 属性 和 原型 方法 
Person.prototype.grade="2016"; 
Person.prototype.run=function (name){ 


return name+" 我 跑 得 很 快 ! "; 


} 

// 创 建 对 象 

Var zhangsan=new Person(" 张 三", " 男 "); 
zhangsan.tel="029-81892332"; 

// 弹 出 警告 框 

alert ("姓名 :; "+zhangsan.name); 

alert ("性 别 ; "+zhangsan.sex); 

alert (zhangsan.say ()); 

alert ("年 级 : "+zhangsan.grade); 

alert (zhangsan.run (zhangsan.name)); // 正 确 
var 1isi=new Person(" 李 四 "," 男 "); 

alert (lisi.run(lisi.name)); // 正 确 


程序 调用 对 象 的 prototype 属性 给 对 象 添加 新 属性 grade 和 新 方法 run(): 


Person.prototype.grade="2016"; 

Person.prototype.run=function (name){ 
return name+" 我 跑 得 很 快 ! "; 

} 


原型 属性 grade 和 原型 方法 run0) 为 对 象 的 所 有 实例 zhangsan、lisi 所 共享 , 用 户 利用 原 
型 添加 对 象 的 新 属性 和 新 方法 后 , 可 通过 对 象 实例 来 使 用 原型 属性 grade 和 原型 方法 run()。 


了 给 承 


继承 是 指 一 个 对 象 (如 对 象 A) 的 属性 和 方法 来 自 另 一 个 对 象 ( 如 对 象 B)。 此 时 称 对 
象 A 的 类 为 子 类 ， 定 义 对 象 B 的 类 为 父 类 。Javascript 中 常用 的 有 两 种 继承 方式 ， 原 型 实 
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现 继承 和 构造 函数 实现 继承 。 
“4.4.1.. 原 型 实现 继 系 





属性 ， 语 法 如 下 : 
A prototype’ = new B(.-5) 3 


【 例 4-5】 下 面 的 例子 将 创建 一 个 Student 类 ， 它 从 Person 继承 了 原型 prototype 中 的 
所 有 属性 和 方法 ， 子 类 Student 比 父 类 多 了 一 个 grade (年 级 ): 


<html> 
<body> 
<script type="text/javascript"> 
function Person (name,age){ 
this.name=name; 
this.age=age; 
} 
Person.prototype.sayHello=function(){ 
alert ("使 用 原型 得 到 Name: "+this.name); 
} 
var per=new Person(" 马 小 倩 ", 21); 


per.sayHello(); // 输 出 : 使 用 原型 得 到 Name: 马 小 倩 


function Student (grade){ // 子 类 student 
this.grade=grade; 


} 
Student .prototype=newPerson(" 张 海 ", 21); // 将 Person 定义 为 Student 的 父 类 


Student .prototype.intr=function(){ 
alert ("姓名 "+this.name+", 年 级 "+this.grade); // 可 以 访问 父 类 中 的 name 属性 

} 
var stu=new Student (5); // 创 建 Student 对 象 
stu.sayHello() ;// 调 用 继承 的 sayHello () 方 法 输出 : 使 用 原型 得 到 Name : 张 海 
stu.intr() ;// 输 出 : 姓名 张 海 ， 年 级 5 

</script> 

</body> 

</html> 


通过 Student 的 prototype 属性 指向 父 类 Parent 的 实例 ， 使 Student 对 象 实例 能 通过 原 
型 链 访问 到 父 类 所 定义 的 属性 、 方 法 等 ， 所 以 Student 对 象 intr0 可 以 访问 父 类 中 的 name 
属性 。 

操作 符 instanceof 可 用 于 识别 正在 处 理 的 对 象 的 类 型 。 例 如 : 


alert(stu instanceof Person)//true 
alert(stu instanceof Student) ;//true 


alert (per instanceof Student);//false 
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alert(per instanceof Person);//true 


注意 一 个 子 类 的 实例 stu 既是 子 类 的 对 象 实例 ， 也 是 父 类 的 对 象 实例 。 显 然 ， 一 个 学 
生 既 是 Student， 也 是 Person。 

原型 实现 继承 时 缺点 是 创建 子 类 实例 时 ， 无 法 向 父 类 构造 函数 传递 参数 。 
*4.4.2 ”构造 函数 实现 继承 


借用 构造 函数 的 方式 继承 是 在 子 类 构造 函数 中 使 用 call 调用 父 类 构造 函数 ， 从 而 解决 
向 父 类 构造 函数 传递 参数 问题 ， 并 实现 继承 父 类 。 

【 例 4-6】 改写 例 4-5， 使 用 构造 函数 实现 继承 的 实例 。 

<html> 

<body> 


<script type="text/javascript"> 
function Person (name,age){ 





this.name=name; 
this.age=age; 
} 
Person.prototype.sayHello=function(){ 
alert ("使 用 原型 得 到 Name: "+this .name) ; 
} 
Var per=new Person(" 马 小 倩 ", 21); 


per.sayHello() ; // 输 出 : 使 用 原型 得 到 Name: 马 小 倩 


function Student (name,age,grade){ // 子 类 Student 
Person.call (this, name,age) / /核心 处 , 使 用 call, 在 子 类 中 给 父 类 传 参数 
this.grade=grade; 
} 
Student .prototype=new Person(); // 将 Person 定义 为 Student 的 父 类 
Student .prototype.intr=function(){ 
alert ("姓名 "+this.name+", 年 级 "+this.grade); 
} 
var stu=new Student (" 张 海 ", 21,5); // 创 建 Student 对象 
stu.sayHello() ;// 调 用 继承 的 sayHello () 方 法 输出 : 使 用 原型 得 到 Name : 张 海 
stu.intr() ;// 输 出 : 姓名 张 海 ， 年 级 5 
</script> 
</body> 
</html> 
通过 Person.call(this,name,age) 可 以 实现 Student 继承 Person 的 属性 name 和 age 并 将 其 
初始 化 。call 方法 的 第 一 个 参数 为 继承 类 的 this 指针 , 第 二 和 第 三 个 参数 为 传 给 父 类 Person 
构造 函数 的 参数 。 
? 4.4.3 ”重新 定义 继承 的 方法 


如 果子 类 重新 定义 继承 的 方法 ， 则 为 原型 对 象 定义 与 父 类 同名 方法 就 可 以 了 。 例 如 ， 
在 上 例 中 为 Student 重新 定义 sayHello0 方 法 可 以 如 下 : 


Student .prototype.sayHello=function(){ 
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alert (" 使 用 子 类 得 到 Name: "+this.name); 
} 


从 而 在 Student 中 重新 定义 来 自 父 类 Person 的 sayHello() 方 法 。Student 对 象 stu 调用 时 
会 是 子 类 自己 的 sayHello() 方 法 。 
stu.sayHello() ;// 调 用 自己 的 sayHello () 方 法 输出 : 使 用 子 类 得 到 Name : 张 海 


JavaScript 内 置 对 象 


JavaScript 脚本 提供 丰富 的 内 置 对 象 ( 内 置 类 )， 包括 同 基本 数据 类 型 相关 的 对 象 ( 如 
String、Boolean、Number)、 人 允许 创建 用 户 自 定义 和 组 合 类 型 的 对 象 ( 如 Object、Array) 
与 其 他 能 简化 JavaScript 操作 的 对 象 (如 Math、Date、RegExp、Function)。 了 解 这 些 内 置 
对 象 是 JavaScript 编程 和 HIMLS 游戏 开发 的 基础 和 前 提 。 
?4.5.1..JavaScript 的 内 置 对 象 框架 


JavaScript 的 内 置 对 象 ( 内 置 类 ) 框架 如 图 4-4 所 示 。 
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图 4-4 JavaScript 的 内 置 对 象 框架 


JavaScript 内 置 对 象 的 基本 功能 见 表 4-1。 
表 4-1 JavaScript 内 置 对 象 的 基本 功能 





内 置 对 象 基本 功能 

Arguments 用 于 存储 传递 给 函数 的 参数 

Array 用 于 定义 数组 对 象 

Boolean 布尔 值 的 包装 对 象 ， 用 于 将 非 布尔 型 的 值 转换 成 一 个 布尔 值 (True 或 False) 
Date 用 于 定义 日 期 对 象 

Error 错误 对 象 ， 用 于 错误 处 理 。 它 还 派生 出 下 面 几 个 处 理 错 误 的 子 类 : 


。 EvalError， 处 理发 生 在 eval0 中 的 错误 ; 

。 SyntaxEror， 处 理 语法 错误 ; 

。 RangeError， 处 理 数值 超出 范围 的 错误 ; 

。 ReferenceError， 处 理 引 用 的 错误 ; 

。TypeEror， 处 理 不 是 预期 变量 类 型 的 错误 ; 

。 URIError， 处 理发 生 在 encodeURI0 或 decodeURIO 中 的 错误 
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续 表 
内 置 对 象 基本 功能 
Function 用 于 表示 开发 者 定义 的 任何 函数 
Math 数学 对 象 ， 用 于 数学 计算 
Number 原始 数值 的 包装 对 象 ， 可 以 自动 地 在 原始 数值 和 对 象 之 间 进 行 转换 
RegExp 用 于 完成 有 关 正 则 表达 式 的 操作 和 功能 
String 字符 串 对 象 ， 用 于 处 理 字符 串 


?4.5.2 基 类 Object 


从 图 4-4 中 可 以 看 到 ， 所 有 的 JavaScript 对 和 象 都 继承 自 Objest 类 ， 后 者 








前 者 提供 基 


本 的 属性 (如 prototype 属性 等 》 和 方法 (如 toString0 方 法 等 )。 而 前 者 也 在 这 些 属性 和 方 
法 的 基础 上 进行 扩展 ， 以 支持 特定 的 某 些 操作 。 


属性 和 方法 
Prototype 属性 


constructor(0) 方 法 
hasOwnProperty(proName) 方 法 


IsPrototypeOf(object) 方 法 
propertyIsEnumerable(proName) 





表 4-2 基 类 Object 的 属性 和 方法 

具体 描述 

对 该 对 象 的 对 象 原型 的 引用 。 原 型 是 一 个 对 象 ， 其 他 对 象 可 以 通过 它 
实现 属性 继承 。 也 就 是 说 可 以 把 原型 理解 成 父 类 

构造 函数 。 构造 函数 是 类 的 一 个 特殊 函数 ， 当 创建 类 的 对 象 实例 时 系 
统 会 自动 调用 构造 函数 ， 通 过 构造 函数 对 类 进行 初始 化 操作 

检查 对 象 是 否 有 局 部 定义 的 〈 非 继承 的 )、 有 具有 特定 名 字 (proName) 
的 属性 

检查 对 象 是 否 是 指定 Ee 对 各 的 诛 弄 

返回 Boolean 值 , 指出 所 指定 的 属性 (proName) 是 否 为 一 个 对 象 的 






















方法 -部 分 以 及 该 属性 是 否 是 可 列举 的 。 如 果 proName 存在 于 object 中 
且 可 以 使 用 一 个 for…in 循环 穷 举 出 来 ， 则 返回 true; 否则 返回 false 
toLocaleString0 方 法 返回 对 象 本 地 化 字符 串 表 示 。 例 如 在 应 用 于 Date 对 象 时 ， 
toLocaleString0 方 法 可 以 根据 本 地 时 间 把 Date 对 象 转换 为 字符 串 ， 
并 返回 结果 
toString0 方 法 返回 对 象 的 字符 串 表示 
valueOf0 方 法 返回 对 象 的 原始 值 ( 如 果 存 在 ) 
?4.5.3 Date 类 RAR 
Date 类 主 要 提供 :获取 和 设置 日 期 和 时 间 的 方法 ， 如 etyear0、 getMonthO、 getDateO 
等 。Date 类 的 常用 方法 见 表 4-3。 
表 4-3 Date 类 的 常用 方法 
方法 具体 描述 
getDate 获得 当前 Wy 的 日 期 
getDay 
getHours R [ 
getMinutes 获得 当前 的 分 钟 
getMonth 获得 当前 的 月 份 
getSeconds 获得 当前 的 秒 
getTime 获得 当前 的 时 间 (毫秒 为 单位 》 


getTimeZoneOffset 


获得 当前 的 时 区 偏 移 信息 
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方法 具体 描述 

getYear 获得 当前 的 年 份 ， 推 荐 使 用 getFullYear0 方 法 代替 
getFullYear() 从 Date 对 象 以 四 位 数字 返回 年 份 

setDate() 设置 对 象 月 中 的 某 一 天 

setFullYear() 设置 对 象 中 的 年 份 字段 

setHours() 设置 对 象 的 小 时 字段 

setMilliseconds() 设置 对 象 的 毫秒 字段 

setMinutes() 设置 对 象 的 分 钟 字段 

setMouth() 设置 对 象 的 月 份 字段 

setSeconds() 设置 对 象 的 秒 字段 

setTime() 使 用 毫秒 的 形式 设置 对 象 的 各 个 字段 

setYear() 推荐 使 用 setFullYear0 

toDateString() 返回 日 期 的 日 期 部 分 的 字符 串 表示 
toGMTString0) 推荐 使 用 toUTCString0 

toLacaleDataString0 返回 日 期 的 日 期 部 分 的 字符 串 表 示 
toLocaleString() 将 对 象 转换 成 一 个 字符 串 

toLacaleTimeString() 返回 日 期 的 时 间 部 分 的 字符 串 表示 

toString() 将 对 象 转换 成 一 个 字符 串 

toTimeString() 将 对 象 转换 成 一 个 字符 串 

toString() 返回 日 期 的 时 间 部 分 的 字符 串 表示 

toUTCString0) 将 对 象 转换 成 一 个 字符 串 

valueOf() 将 对 象 转换 成 它 的 内 部 毫秒 格式 

parse() 静态 方法 ， 解 析 日 期 和 时 间 的 字符 串 表示 ， 返 回 它 的 内 部 毫秒 表示 
UTCO 静态 方法 ， 返 回 指定 的 UTC 日 期 和 时 间 的 毫秒 表示 


可 以 使 用 下 面 三 种 方法 创建 Date 对 象 : 
(1) 不 带 参数 : 


Var today = new Date() 7 
我 们 将 取得 当前 的 年 份 ， 并 输出 它 : 


<script type="text/javascript"> 
var d = new Date () 
document .write (d.getFullYear ()) 
</script> 


(2) 创建 一 个 指定 日 期 的 Date 对 象 : 

Var theDate = new Date(2017, 9, 1); 

(3) 创建 一 个 指定 时 间 的 Date 对 象 : 

var theTime = new Date(2017, 9, 1, 10, 20,30,50); 

【 例 4-7】 计算 求 1+2+3+…+100000 之 值 所 需要 的 运行 时 间 (毫秒 数 )。 


<html > 





NN HTMLS5 网 页 游戏 设计 从 基础 到 开发 


<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title> 使 用 Date 对 象 示例 </title> 
</head> 
<body> 
<pre> 
<script type="text/javascript"> 
Var t1,t2,htime,i,sum=0; 
tl = new Date(); // 记 录 循 环 前 的 时 间 
document .writeln ("循环 前 的 时 间 是 :"+t1.toLocalestring()+":"+t1l1. 
getMilliseconds ()); 
for (i=1;i<=100000;i++) sum+=i; // 耗 时 的 循环 
t2 = new Date(); // 记 录 循环 后 的 时 间 
document .writeln ("循环 后 的 时 间 是 :"+t2.toLocalestring()+":"+t2. 
getMilliseconds ()) 7 
htime = t2.getTime() - tl1.getTime () 7 
document .writeln ("执行 100000 次 循环 用 时 :"+ htime+" 毫 秒 ") 
</script> 
</pre> 
</body> 
</html> 


?4.5.4 ”String 类 


String 是 JavaScript 的 字符 品类 ， 用 于 管理 和 操作 字符 串 数据 。 可 以 使 用 下 面 两 各 方法 
创建 String 对 象 : 


MyStr = new String ("这 是 一 个 测试 字符 串 ") ; ”// 把 参数 作为 Mystr 对 象 的 初始 值 
MySstr = "这 是 一 个 测试 字符 串 "; // 直 接 对 String 对 象 赋值 字符 串 


String 类 只 有 一 个 属性 length， 用 来 返回 字符 串 的 长 度 。 
【 例 4-8】 计算 String 对 象 的 长 度 。 


<HTML> 
<HEAD><TITLE> 演 示 使 用 String 对 象 的 length 属性 </TITLE></HEAD> 
<BODY> 





<Script Language ="JavaSscript"> 
Var MySstr; 
MyStr = new String ("这 是 一 个 测试 字符 串 ") ; 
document .write ("“" +MyStr+"” 的 长 度 为 :" + Mystr. length); 
</Script> 
</BODY> 
</HTML> 


String 类 的 常用 方法 见 表 4-4。 


方法 
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表 4-4 String 类 的 常用 方法 
具体 描述 





charAt (index)) 


slice(start,end) 


replace(substr,replace) 
concat (str) 
substring (start,stop) 


blinkO 

bold0 

italics() 
lastIndexOf (str) 
match() 

search() 

small() 
substr(start,length) 
toUpperCase() 
toLowerCase() 
sup0 


split(separatorhowmany) 


用 来 返回 字符 串 中 指定 位 置 的 字符 ， 参 数 index 用 于 指定 字符 串 中 某 个 位 置 
的 数字 ， 从 0 开始 计数 

用 于 返回 字符 串 的 片段 。 参 数 start: 指定 要 返回 的 片段 的 起 始 索引 。 如 果 是 
负数 ， 则 指 从 字符 串 的 尾部 开始 算 起 的 位 置 。-1 指 字符 串 的 最 后 一 个 字符 ， 
-2 指 倒数 第 二 个 字符 , 以 此 类 推 。 参数 end: 指定 要 返回 的 片段 的 结尾 索引 。 
如 果 是 负数 ， 则 指 从 字符 串 的 尾部 开始 算 起 的 位 置 。 

用 于 在 字符 串 中 用 一 些 字符 替换 另 一 些 字符 ， 例 如 strreplace("china", 
"chinese") 

用 于 返回 一 个 String 对 象 ， 该 对 象 包含 了 两 个 提供 的 字符 串 的 连接 ， 例 如 
document.write(str1.concat(str2)) 

用 于 返回 位 于 String 对 象 中 指定 位 置 的 子 字符 串 。start: 指定 要 提取 子 串 的 
第 一 个 字符 的 位 置 。stop: 指定 要 提取 子 串 的 最 后 一 个 字符 的 位 置 

把 HIML<BLINK> 标 记 放置 在 String 对 象 中 的 文本 两 端 , 显示 为 闪 动 的 文本 
把 HIML <B> 标 记 放置 在 String 对 象 中 的 文本 两 端 ， 显 示 为 加 粗 的 文本 
把 HIML <[> 标 记 放 置 在 String 对 象 中 的 文本 两 端 ， 显 示 为 斜体 的 文本 
返回 String 对 象 中 子 字符 串 最 后 出 现 的 位 置 

使 用 正则 表达 式 对 象 对 字符 串 进 行 查找 ， 并 将 结果 作为 数组 返回 

返回 与 正则 表达 式 查找 内 容 匹 配 的 第 一 个 子 字符 串 的 位 置 

将 HTML 的 <SMALL> 标 识 添加 到 String 对 象 中 的 文本 两 端 

返回 一 个 从 指定 位 置 开始 的 指定 长 度 的 子 字符 串 

返回 一 个 字符 串 ， 该 字符 串 中 的 所 有 字母 都 被 转化 为 大 写字 母 
返回 一 个 字符 串 ， 该 字符 串 中 的 所 有 字母 都 被 转化 为 小 写字 母 

用 于 将 HTML 的 <SUP> 标 记 放置 到 String 对 象 中 的 文本 两 端 ， 从 而 将 字符 
串 显 示 为 上 标 

split0 方 法 用 于 将 一 个 字符 串 分 隔 为 子 字符 串 ， 然 后 将 结果 作为 字符 串 数组 
返回 。separator: 指定 分 隔 符 。howmany: 指定 返回 的 数组 的 最 大 长 度 


【 例 4-9】 演示 使 用 sup() 方 法 显示 为 上 标的 例子 。 


<HTML> 


<HEAD><TITLE> 演 示 使 用 sup () 方法 的 例子 </TITLE></HEAD> 


<BODY> 


<Script LANGUAGE 


var str="2"; 


= Javascript> 


document .write(str + str.sup()+"=4"); 


</Script> 
</BODY> 
</HTML> 


浏览 结果 如 图 4-5 所 示 。 








个 演示 舍 用 sup0 方 法 的 例子 x | 
文件 (有 震 坟 (查看 (V) 收藏 夫 (A) 
22-4 








4-5 ”显示 为 上 标 
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【 例 4-10】 演示 slice0 方 法 的 例子 。 


<HTML> 

<HEAD><TITLE> 演 示 slice () 方 法 的 例子 </TITLE></HEAD> 
<BODY> 

<script type="text/javascript"> 

Var str="Hello world!™" 

document .write(str- slice (6, 11)) 

</script> 

</BODY> 

</HTML> 


浏览 结果 如 下 : 


world 


Array 数组 是 在 内 存 中 保存 一 组 数据 ，Array 类 的 常用 方法 见 表 4-5。 
表 4-5 Array 数组 的 常用 方法 


























方法 具体 描述 

Length 属性 数组 包含 的 元 素 的 个 数 

concat() 给 数组 添加 元 素 〈 此 操作 原 数 组 的 值 不 变 ) 

join0 把 数组 中 所 有 元 素 转换 成 字符 串 连接 起 来 ， 元 素 是 通过 指定 的 分 隔 符 进 行 分 隔 的 
popO 删除 并 返回 数组 最 后 一 个 元 素 

pushO 把 一 个 元 素 添加 到 数组 的 尾部 ， 返 回 值 为 数组 的 新 长 度 
reverse() 在 原 数 组 上 颠倒 数组 中 元 素 的 顺序 

shiftO 删除 并 返回 数组 的 头 部 元 素 

sliceO 返回 数组 的 一 个 子 数组 ， 该 方法 不 修改 原 数组 

sort0 从 原 数 组 上 对 数组 进行 排序 

splice0 插入 和 删除 数组 元 素 ， 该 方法 会 改变 原 数组 

toString0 把 数组 转换 成 一 个 字符 串 

unshiftO 在 数组 头 部 插入 一 个 元 素 ， 返 回 值 为 数组 的 新 长 度 
length 数组 包含 的 元 素 的 个 数 

concatO) 给 数组 添加 元 素 〈 此 操作 原 数组 的 值 不 变 ) 


1. Array 数组 的 创建 与 使 用 
方法 一 : 可 以 使 用 new 关键 字 创 建 Array 对 象 ， 方 法 如 下 : 


Array 对象 = new Array (数组 大 小 ) 

例如 下 面 的 语句 可 以 创建 一 个 由 3 个 元 素 组 成 的 数组 cars: 
Var cars=new Rrray(3) ; 

通过 下 面 的 方法 访问 数组 元 素 : 

数组 元 素 值 = 数组 名 [索引 ] 
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例如 : 


Var cars=new Array(3); 
cars[0]="Audi"; 
cars[1]="BMW"; 


cars[2]="Volvo"; 

方法 二 : 在 创建 数组 对 象 的 时 候 给 元 素 赋值 : 

var cars=new Array ("Audi", "BMW", "Volvo"); 

方法 三 ， 直 接 赋值 : 

Var cars=["Audi", "BMW","Volvo"]; 

不 过 注意 创建 对 象 时 用 的 是 小 括号 “( )”， 而 直接 赋值 时 用 的 是 方 括 号 “[ ]”。 

2. 数组 遍历 

可 以 使 用 for 语句 遍历 数组 的 所 有 索引 ， 然 后 使 用 数组 名 [索引 ] 方 法 访问 每 个 数组 
4-11】 使 用 for 语句 遍历 数组 。 





<HTML> 
<HEAD><TITLE> 使 用 for 语句 遍历 数组 </TITLE></HEAD> 
<BODY> 
<Script LANGUAGE = JavaScript> 
Var MYStT7 
MyArr = new Array(3); 
MyArr[0] = "中 国 "; 
MyArr[1] = "美国 "; 


MyArr[2] = "日 本 "; 
for (var i=0;i< MyArr.length; i++) 
document .write (MyArr [i]+"<br/>"); 
</Script> 
</BODY> 
</HTML> 


浏览 结果 如 下 : 


另外 ，for…in 循环 也 可 用 来 遍历 数组 的 每 个 元 素 ， 改 写 上 例如 下 : 


<Script LANGUAGE = JavaSscript> 
Var MySstr; 
MyArr = new Array(3); 
MyArr[0] = "中 国 "; 
MyArr[1] = "美国 "; 


HTML5 网 页 游戏 设计 从 基础 到 开发 


MyArE[2] 三 "日本" 
for (m in MyArr){ //m 为 数组 的 key 
document .write (MyArr [m] +"<br/>"); 
</Script> 


浏览 结果 同上 。 
【 例 4-12】 给 定 任意 一 个 字符 串 ， 使 用 for…in 语句 来 统计 字符 出 现 的 个 数 。 


<HTML> 
<HEAD><TITLE> 使 用 for 语句 遍历 数组 </TITLE></HEAD> 
<BODY> 
<Script LANGUAGE = JavaScript> 
function charNum(str){ 
yar charobij=[]> // 空 的 Array 数组 
for (i=0, len=str.length;i<len;i++){ 
if(charObj [str[i]])t{ 
charObj [str[i]]++; 
}else{ 
charobj [str[i]]=1; 
} 
} 
Var strTem=""; // 临 时 变量 
for (value in charObj){ 
strTem+="'"'+value+"' "的 个 数 : '+charobj [value]+'\n'; 
} 
return strTem; 
} 
document .write (charNum ("Hello")); 
</script> 
</BODY> 
</HTML> 


浏览 结果 如 下 : 
"H" 的 个 数 : 亚 me" 的 个 数 : 1 "1" 的 个 数 : 2 mo" 的 个 数 : 下 
3. 数组 排序 


使 用 Array 类 的 sort () 方 法 可 以 对 数组 元 素 进行 排序 ，sort 0 方法 返回 排序 后 的 数组 。 
语法 如 下 : 


arrayObject. sort(sortby) 


参数 sortby 可 选 ， 用 于 规定 排序 顺序 ，sortby 必须 是 函数 。 

如 果 调 用 该 方法 时 没有 使 用 参数 ， 将 按 字母 顺序 对 数组 中 的 元 素 进 行 排序 ， 说 得 更 精 
确 点 ， 是 按照 字符 编码 的 顺序 进行 排序 。 

【 例 4-13】 对 数组 排序 的 例子 。 
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<HTML> 
<HEAD><TITLE> 排 序数 组 元 素 </TITLE></HEAD> 
<BODY> 

<Script LANGUAGE = JavaScript> 


Var arr = new Array(6); 


arr[0] = "George"; 
arr[1] = "Johney"; 
arr[2] = "Thomas"; 
arr[3] = "James"; 
arr[4] = "Adrew"; 
arr[5] = "Martinn7 


document .write ("排序 前 "+ arr + "<br />"); 
document .write ("排序 后 "+ arr.sort()); 
</Script> 

</BODY> 

</HTML> 


浏览 结果 如 下 : 


排序 前 George, Johney, Thomas, James, Adrew, Martin 
排序 后 Adrew， George, James, Johney, Martin, Thomas 


数组 元 素 为 整数 时 , sort() 方 法 并 没有 按 数 值 大 小 真正 排序 , 而 是 按 字符 编码 顺序 排序 。 
下 面 举例 说 明 : 


<html> 

<body> 

<script type="text/javascript"> 

Var arr = new Array(6); 

areloOl = Tor arelil = 57 arrl2) = A057 
arr[3] = 25;arr[4] = 111; arr[5] = 1; 
document .write (arr + "<br />") 
document .write (arr.sort ()) 

</script> 

</body> 

</html> 


浏览 结果 如 下 : 


Oo AOn 2 om 
no os 


请 注意 , 上 面 的 代码 没有 按照 数值 的 大 小 对 数字 进行 排序 , 而 是 按 字 符 编码 顺序 排序 。 
如 果 想 按照 其 他 标准 进行 排序 ， 就 需要 提供 排序 比较 函数 〈 参 数 sortby)， 该 函数 要 比较 两 
个 值 ， 然 后 返回 一 个 用 于 说 明 这 两 个 值 的 相对 顺序 的 数字 。 比 较 函 数 应 该 具有 两 个 参数 a 
和 b， 其 返回 值 如 下 : 

。 若 a 小 于 b， 在 排序 后 的 数组 中 a 应 该 出 现在 b 之 前 ， 则 返回 一 个 小 于 0 的 值 。 
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。 若 a 等 于 b， 则 返回 0。 
。 若 a 大 于 b， 则 返回 一 个 大 于 0 的 值 。 


对 上 例 增加 一 个 排序 比较 函数 sortNumber(a, b)， 代 码 如 下 : 


<html> 
<body> 
<script type="text/javascript"> 
function sortNumber(a, b) 
returna- b; 
} 
Var arr = new Array(6) ; 


// 排 序 比较 函数 


arr[0] = 10; arr[1] = 5; arr[2] = 40; 
arr[3] = 25; arr[4] = 111; arr[5] = 1; 
document .write(arr + "<br />") 
document .write (arr.sort (sortNumber)) 

</script> 

</body> 

</html> 

浏览 结果 如 下 : 

DO A 2 

Oo a 

4. 数组 的 操作 

(1) push() 方 法 

往 数组 后 面 添加 数组 ， 并 返回 数组 新 长 度 。 

var a = ["aa", "bb", "ce"]; 

document .write (a.push ("dd")); // 输 出 4 


document .write (a); 


// 输 出 aa,bb, cc,dd 


而 unshift0 方 法 可 向 数组 的 开头 添加 一 个 或 更 多 元 素 ， 并 返回 新 的 长 度 。 


(2) pop0 方 法 和 shift() 方 法 





pop0 方 法 删除 数组 最 后 一 个 元 素 ， 并 返回 
元 素 从 其 中 删除 ， 并 返回 第 一 个 元 素 的 值 。 


0 





document .write (a.pop()); 


document .write(a.shift ()); 


(3) slice0 方 法 


该 元 素 。 而 shift0 方 法 用 于 把 数组 的 第 一 个 


// 输 出 cc 
// 输 出 aa 


可 从 已 有 的 数组 中 返回 选 定 的 元 素 的 一 个 新 数组 。 语 法 如 下 : 


arrayObject.slice (start,end) 


第 4 章 JavaScript 面向 对 象 程序 设计 


返回 一 个 新 数组 包含 从 start 到 end (不 包括 end 元 素 ) 的 arrayObject 中 的 元 素 。 参 
数 start 必需 。 规定 从 何 处 开始 选取 。 如果 是 负数 , 那么 它 规定 从 数组 尾部 开始 算 起 的 位 置 。 
也 就 是 说 ，-1 指 最 后 一 个 元 素 ，-2 指 倒 数 第 二 个 元 素 ， 以 此 类 推 。 

end 可 选 。 规 定 从 何 处 结束 选取 。 该 参数 是 数组 片段 结束 处 的 数组 下 标 。 如 果 没 有 指 
定 该 参数 ， 那 么 切 分 的 数组 包含 从 start 到 数组 结束 的 所 有 元 素 。 如 果 这 个 参数 是 负数 ， 那 
么 它 规定 的 是 从 数组 尾部 开始 算 起 的 元 素 。 


例如 : 

WATTa = LD 

document .write(a.slice(1,2)+ "<br />"); // 输 出 b 
document .write(a.slice(2)+ "<br />"); // 输 出 c,d,e,f,g 
document .write(a.slice(-4)+ "<br />"); // 输 出 qd,e,f,g 
document .write(a.slice(-6,-2)+ "<br />"); // 输 出 b,c,d,e 


a.slice(1,2) 返 回 从 下 标 为 1 开始 , 到 下 标 为 2 之 间 的 元 素 , 注意 并 不 包括 下 标 为 2 的 元 
素 ， 所 以 仅 有 'b'。a.slice(2) 只 有 一 个 参数 ， 则 默认 到 数组 最 后 元 素 ， 所 以 为 'c','d','e','f,'g'。 

a.slice(-4) 中 -4 是 表示 倒数 第 4 个 元 素 ， 所 以 返回 倒数 的 4 个 元 素 。 

alert(a.slice(-6,-2)) 从 倒数 第 6 个 开始 ， 截 取 到 倒数 第 2 个 元 素 前 ， 则 返回 b,c,d,e。 

(4) join0 方 法 

用 于 把 数组 中 的 所 有 元 素 连 接 起 来 放 入 一 个 字符 串 。 语 法 如 下 : 


arrayObject .join (separator) 
separator 指定 要 使 用 的 分 隔 符 。 如 果 省 略 该 参数 ， 则 使 用 逗号 作为 分 隔 符 。 


<script type="text/javascript"> 
Var arr = new Array(3); 


arr[0] = "George"; arr[1] = "John"; arr[2] = "Thomas"; 
document .write (arr.join(".")); // 输 出 George.John.Thomas 
</script> 
5.， 二 维 数组 


数组 中 的 元 素 又 是 数组 就 成 为 二 维 数组 。 创 建 二 维 数组 的 方法 如 下 : 
方法 一 : 先 创建 一 个 一 维 数组 ， 然 后 该 一 维 数组 的 所 有 元 素 再 创建 一 维 数组 。 


var persons = new Rrray(3) // 创 建 一 个 一 维 数组 


persons[0] = new Array (2); // 每 个 元 素 persons [0] 又 是 一 维 数组 
persons[1] = new Array(2); // 每 个 元 素 persons[1] 又 是 一 维 数组 
persons[2] = new Array (2); // 每 个 元 素 persons [2] 又 是 一 维 数组 
persons [0] [0] = "zhangsan"7 

persons [0] [1] = 25; 

persons [1] [0] = "lisi"™; 
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Persons [2] [0] = "wangwu"™; 





persons[2] [1] = 32; 
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方法 二 : 先 创建 一 个 一 维 数组 ， 然 后 该 一 维 数组 的 所 有 元 素 直接 赋值 。 


Var persons = new Array(3); 


persons[0] = ["zhangsan", 25]; 

persons[1] = ["lisi", 21]; 

persons[2] = ["wangwu", 32]; 

方法 三 ， 直 接 赋值 。 

var persons = [["zhangsan", 25], ["lisi", 21], ["wangwu", 32]]; 
二 维 数组 或 多 维 数组 的 长 度 是 多 少 ? 测试 下 面 的 代码 : 
document .write ("persons.length = " + persons.length); 


输出 的 结果 是 : persons.length = 3。 
也 就 是 说 ， 二 维 数组 的 length 属性 返回 的 是 二 维 数组 第 一 维 的 长 度 ， 而 不 是 二 维 数组 


中 元 素 的 个 数 。 
计算 二 维 数组 的 元 素 个 数 ， 可 以 创建 嵌 套 for 循环 来 遍历 二 维 数组 ， 例 如 ; 
Var persons = [["zhangsan", 25], ["lisi", 21], ["wangwu", 32]]; 


function getArr2ElementNum(arr) { 

var eleNum = 0; 

for (var i = 0; i < arr.length; i++) { // 二 维 数组 遍历 

for (var ] = 0; j < arr[i].length; j++) { 

eleNum++; 

} 

} 

return eleNum; 

} 

alert (getArr2ElementNum (persons)); // 返 回 persons 二 维 数组 的 元 素 个 数 6 


二 维 数 组 的 元 素 使 用 如 下 : 
数组 名 [第 一 维 索引 ] [第 二 维 索引 ] 
例如 : 输出 并 计算 二 维 数组 元 素 的 和 。 


<HTML> 
<HEAD><TITLE> 输 出 并 计算 二 维 数组 元 素 的 和 </TITLE></HEAD> 
<BODY> 
<Script Language ="JavaScript"> 

Var sum=0; 


Var arr = hem Array()s // 先 声明 一 维 

for (var i=0;i<3;i++){ // 一 维 长 度 为 3 
arr[i]=new Array(); // 再 声明 第 二 维 
for (var j=0;j<5;j++){ // 第 二 维 长 度 为 5 


arr[i] [j]=i*5+j+1; 
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} 
// 遍 历 二 维 数组 arr 
for (var i=0;i<arr.length;i++){ 
for (var j=0;j<arr[i].length;j++){ 
document .write (arr[i] [j]); // 输 出 元 素 值 
sum=sum+arr [i] [j]; 
} 
document .write ("<br/>"); // 换 行 
} 
document .write ("二 维 数组 元 素 的 和 : "+sum) ; 
</Script> 
</BODY> 
</HTML> 


结果 : 


2 3 A 
Gs 7 9 TO 

bl ETA 59 
二 维 数组 元 素 的 和 : 120 


数组 中 的 元 素 又 是 二 维 数组 就 成 为 三 维 数组 ， 以 此 类 推 多 维 数 组 。 多 维 数组 的 length 
属性 永远 返回 第 一 维 数组 的 元 素 个 数 。 多 维 数组 的 遍历 类 似 二 维 数组 采用 多 个 嵌 套 for 循 
环 来 遍历 。 
?4.5.6 Math 对 象 


Math 对 象 是 针对 一 个 已 创建 好 的 Math 类 的 实例 ， 因 此 不 能 使 用 new 运算 符 。 其 提供 
一 些 属性 是 数学 中 常用 的 常量 ， 包 括 E (自然 对 数 的 底 ， 约 为 2.718)、LN2 (2 的 自然 对 
数 )、LN10 (10 的 自然 对 数 )、LOG2E (以 2 为 底 的 e 的 对 数 )、LOG10E〔 以 10 为 底 的 e 
的 对 数 )、PI 圆周率)、SQRT1 2 〈1/2 的 平方 根 )、SQRT2 (2 的 平方 根 ) 等 。Math 对 象 
提供 的 一 些 方法 是 数学 中 常用 的 函数 ， 如 sin0、random()、log0 等 。Math 对 象 的 常用 方法 
见 表 4-6。 


表 4-6 ”Math 对 象 的 常用 方法 


方法 具体 描述 

abs 返回 数值 的 绝对 值 

acos 返回 数值 的 反 余弦 值 

asin 返回 数值 的 反正 弦 值 

atan 返回 数值 的 反正 切 值 

atan2 返回 由 X 轴 到 (yx) 点 的 角度 〈 以 弧度 为 单位 ) 
ceil 返回 大 于 等 于 其 数字 参数 的 最 小 整数 
cos 返回 数值 的 余弦 值 

exp 返回 e (自然 对 数 的 底 ) 的 究 

floor 返回 小 于 等 于 其 数字 参数 的 最 大 整数 
log 返回 数字 的 自然 对 数 


max 返回 给 出 的 两 个 数值 表达 式 中 的 较 大 者 
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i 返回 给 出 的 两 个 数值 表达 式 中 的 较 小 者 


返回 数字 的 了 


具体 描述 


返回 底 表达 式 的 指定 次 早 

返回 介 于 0 一 1 之 间 的 伪 随 机 数 
返回 与 给 出 的 数值 表达 式 最 接近 的 整数 
返回 数字 的 正弦 值 

返回 数字 的 平方 根 





E 切 值 


【 例 4-14】 演示 使 用 Math 对 象 。 


<HTML> 
<HEAD><TITLE> 演 示 使 用 Math 对 象 </TITLE></HEAD> 
<BODY> 

<Script Language 


Var today; 


document .write 


document .write 


document .write 


document .write 


document .write 


document .write 


document .write 


document .write 
</script> 
</BODY> 
</HTML> 


浏览 结果 如 下 : 


Math. 
Math. 
Math. 
Math. 
Math. 
Math. 
Math. 
Math. 


:4 








Object 是 一 个 在 JavaScript 中 经 常 使 用 的 类 型 , 而 且 JavaScript 中 的 所 有 类 都 是 继承 自 
Object 的 。 虽 说 我 们 平时 只 是 简单 地 使 用 了 Object 对 象 来 存储 数据 (例如 用 户 单 击 的 坐标 
位 置 x，y)， 其 实 Object 对 象 包含 了 很 多 有 用 的 属性 和 方法 ， 这 里 介绍 Object 对 象 的 基本 
用 法 。 


abs (-1)= 1 
ceil(0.60)= 


="JavaSscript"> 


("Math. 


("Math 


("Math. 
("Math. 
("Math. 
("Math. 
("Math. 
("Math. 


于 


floor (0.60)= 0 


abs(-1)= " + Math.abs(-1)+"<BR>") 
.Celil(0.60)= " +Math.ceil (0.60)+"<BR>"); 
floor(0.60)= " +Math.floor(0.60)+"<BR>"); 
max(5,7)= " +Math.max(5,7)+"<BR>"); 
min(5,7)= " +Math.min(5,7)+"<BR>"); 
random()= " +Math.random()+"<BR>"); 
round(0.60)= " +Math.round(0.60)+"<BR>"); 
sqrt(4)= " +Math.sqrt (4)+"<BR>"); 


random()= 0.9517934215255082 


max(5,7)= 7 
min(5,7)= 5 
round(0.60)= 1 
sqrt(4)= 2 


5.7 Object 对 象 
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1. 创建 Object 对 象 实例 

创建 Object 对 象 的 方式 通常 有 两 种 方式 : 构造 函数 和 对 象 字面 量 。 
方式 一 : 构造 函数 

Var person = new Object() 7 


person.name = "Zhangsan"7 
person.age = 25; 


这 种 方式 使 用 new 关键 字 , 接着 跟 上 Object 构造 函数 ， 再 来 给 对 象 实例 动态 添加 上 不 
同 的 属性 。 这 种 方式 相对 来 说 比较 烦琐 ， 一 般 推荐 使 用 对 象 字面 量 来 创建 对 象 。 

方式 二 : 对 象 字面 量 

对 象 字面 量 很 好 理解 ， 使 用 key/value 的 形式 直接 创建 对 象 ， 简 洁 方便 。 

















var person = { 

name: "zhangsan", 
age: 25 
a 
这 种 方式 直接 通过 花 括号 将 对 象 的 属性 包括 起 来 ， 使 用 key/value 的 方式 创建 对 象 属 
性 ， 每 个 属性 之 间 用 逗号 隔 开 。 

2. Object 对 象 实例 的 属性 和 方法 

不 管 通过 哪 种 方式 创建 了 对 象 实例 后 ， 该 实例 都 会 拥有 下 面 的 属性 和 方法 ， 下 面 将 会 
一 一 说 明 。 

(1) constructor 属性 

constructor 属性 是 保存 当前 对 象 的 构造 函数 ， 前 面 的 例子 中 ，constructor 保存 的 就 是 
Object 方法 。 

Var person = new Object(); 

person.name = "Zhangsan"7 

person.age = 25; 

console.10g (person.constructor);// 输 出 function Object() 1{} 

(2) hasOwnProperty(propertyName) 方 法 

hasOwnProperty() 方 法 接收 一 个 字符 串 参数 ， 该 参数 表示 属性 名 称 , 用 来 判断 该 属性 是 
否 在 当前 对 象 实例 中 。 我 们 来 看 看 下 面 这 个 例子 : 


var arr = []; 


console.log(arr.hasOwnProperty ("length")); //true 
console.log (person.hasOwnProperty("age")) ; //true 
console.1log (person.hasOwnProperty ("length")); //false 


在 这 个 例子 中 ， 首 先 定义 了 一 个 数组 arr， 我 们 通过 hasOwnProperty() 方 法 判断 length 
是 arr 自己 的 属性 。 而 通过 hasOwnProperty() 方 法 判断 person 没有 length 的 属性 。 

(3) isPrototypeOf(Object) 方 法 

isPrototypeOf 是 用 来 判断 指定 对 象 objectl 是 否 存 在 于 另 一 个 对 象 object2 的 原型 链 中 
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的 ， 是 则 返回 tue， 和 否则 返回 false。 格 式 如 下 : 





obJject1.isPrototypeOof (object2); 


(4) propertyIsEnumerable(propertyName) 方 法 

通过 这 个 方法 可 以 检测 出 这 个 对 象 成 员 是 否 是 可 遍历 的 ， 如 果 是 可 遍历 出 来 的 ， 证 明 
这 个 对 象 就 是 可 以 利用 for…in 循环 进行 遍历 的 。 

格式 如 下 : obj.propertyIsEnumerable(propertyName) 

如 果 propertyName 存在 于 obj 中 且 可 以 使 用 一 个 for…i 循环 穷 举 出 来 ， 那 么 
propertyIsEnumerable 属性 返回 true。 如 果 object 不 具有 所 指定 的 属性 或 者 所 指定 的 属性 不 
是 可 列举 的 ， 那 么 propertyIsEnumerable 属性 返回 false。 典 型 地 ， 预 定义 的 属性 不 是 可 列 
举 的 ， 而 用 户 定义 的 属性 总 是 可 列举 的 。 

(5) toString() 方 法 

返回 对 象 对 应 的 字符 串 : 

Var obj] = new Object(); 

console.1o0g (obj.toLocalestring()); // [object Object] 


Var date = new Date(); 
console.1log (date.toLocalestring()); //2017/2/15 下 午 5:13:12 


(6) valueOf0 方 法 
返回 对 象 的 原始 值 ， 可 能 是 字符 串 、 数 值 或 bool 值 等 ， 看 具体 的 对 象 。 


Var person = { 
name: "zhangsan", 
age: 25 
js 
console.1log (person.valueof()); //Object {name: "zhangsan", age: 25} 
var arp = 2 Ol 
console.1log(arr.valueof ()); A i le | 
Var date = new Date(); 
console.log(date.valueOof ()); //1487149947479 


如 代码 所 示 ， 三 个 不 同 的 对 象 实例 调用 valueOf 返回 不 同 的 数据 。 


HTML DOM 编程 


JavaScript 使 用 两 种 主要 的 对 象 模型 : 浏览 器 对 象 模型 (BOM ) 和 文档 对 象 模型 
(DOM)， 前 者 BOM 提供 了 访问 浏览 器 各 个 功能 部 件 ， 如 浏览 器 窗口 本 身 、 浏 览 历史 等 的 
操作 方法 ， 后 者 DOM 则 提供 了 访问 浏览 器 窗口 内 容 ， 如 文档 、 图 片 等 各 种 HTML 元 素 
以 及 这 些 元 素 包 含 的 文本 的 操作 方法 。 

* 4.6.1 HTML DOM 框架 


HIML DOM 定义 了 访问 和 操作 HIML 文档 的 标准 方法 。 在 DOM 模型 中 ， 它 以 树 的 
形式 对 这 个 文档 进行 描述 ， 其 中 各 HIML 的 每 个 元 素 〈 标 记 ) 都 作为 一 个 对 象 ， 如 图 4-6 
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所 示 。 它 把 HIML 文档 表现 为 带 有 元 素 、 属性 和 文本 的 树 结构 (节点 树 )。 具体 来 讲 , DOM 
节点 树 中 的 节点 有 元 素 节 点 、 文 本 节点 和 属性 节点 三 种 不 同 的 类 型 。 

1. 元 素 节点 

在 HIML 文档 中 ,各 HTML 元 素 如 <body>、<p>、<ul> 等 构成 文档 结构 模型 的 一 个 元 
素 对 象 。 在 节点 树 中 ， 每 个 元 素 对 象 构成 了 一 个 元 素 节点 。 

2. 文本 节点 

在 节点 树 中 ， 元 素 节点 构成 树 的 枝条 ， 而 文本 则 构成 树 的 叶子 。 如 果 一 份 文档 完全 由 
空白 元 素 构成 ， 它 将 只 有 一 个 框架 ， 本 身 并 不 包含 什么 内 容 。 没 有 内 容 的 文档 是 没有 价值 
的 ， 而 绝 大 多 数 内 容 由 文本 提供 。 在 下 面 语句 中 : 


<p>Welcome to<em> DOM </em>World! </p> 


包含 “Welcome to”“DOM”“World!” 三 个 文本 节点 。 

3. 属性 节点 

HTML 文档 中 的 元 素 或 多 或 少 都 有 一 些 属性 ， 便 于 准确 、 具 体 地 描述 相应 的 元 素 ， 便 
于 进行 进一步 的 操作 ， 例 如 : 


<hl class="Sample">Welcome to DOM World! </h1l> 
<ul id="purchases">..</ul> 


这 里 class="Sample"、id="purchases" 都 属于 属性 节点 。 因 为 所 有 的 属性 都 是 放 在 元 素 
标记 里 ， 所 以 属性 节点 总 是 包含 在 元 素 节点 中 。 























































































































HTML 文 档 
根 元 素 : 
<html> 
元 素 : 元 素 : 
<head> <body> 
2 元 素 ; 元 素 : 元 素 : | … 
<a> <p> <form> 
I 
[ ] 
文本 : 
< 立 档 标题 * 属性 : 文本 : 
SE <href> “链接 标题 " 
图 4-6 DOM 树 结构 


从 图 4-6 中 可 以 看 出 ，html 为 根 元 素 对 象 ， 可 代表 整个 文档 。head 和 body 两 个 分 支 
是 两 个 元 素 节点 ， 位 于 同一 层次 ， 为 兄弟 关系 ， 存 在 同一 父 元 素 对 象 ， 但 又 有 各 自 的 子 元 
素 对 象 。title 元 素 节点 包含 有 “文档 标题 ”文本 子 节点 ，a 元 素 节点 包含 有 href 属性 节点 
和 “链接 标题 ”文本 节点 。 

文档 对 象 模型 (DOM) 中 各 个 节点 被 视 为 各 种 类 型 的 Node 对 象 。 每 个 Node 对 象 都 
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有 自己 的 属性 和 方法 , 利用 这 些 属性 和 方法 可 以 遍历 整个 文档 树 。 由 于 HTML 文档 的 复杂 
性 ，DOM 定义 了 nodeType 来 表示 节点 的 类 型 。 表 4-7 列 出 了 Node 常用 的 几 种 节点 类 型 。 


表 4-7 DOM 的 节点 类 型 





节点 类 型 nodeType 常量 nodeType 值 备注 

Element Node. ELEMENT NODE 1 元 素 节点 

Attr Node.ATTRIBUTE NODE 名 节点 属性 

Text Node.TEXT NODE 3 文本 节点 
Comment Node.COMMENT NODE 8 注释 的 文本 
Document Node.DOCUMENT _ NODE 9 document 
DocumentFragment Node DOCUMENT FRAGMENT NODE 11 document 片段 


DOM 树 的 根 节点 是 个 Document 对 象 ，JavaScript 操作 HTML 文档 的 时 候 ，document 
即 指向 整个 文档 ，<body>、<table> 等 节点 类 型 即 为 Element。Comment 类 型 的 节点 则 是 指 
文档 的 注释 。 
利用 DOM, 开发 人 员 可 以 动态 地 创建 HTML 文档 , 可 以 遍历 、 增 加 、 删 除 、 修 改 HIML 
文档 内 容 。DOM 提供 的 API 与 编程 语言 无 关 ， 所 以 对 一 些 DOM 标准 中 没有 明确 定义 的 
接口 , 其 具体 实现 在 不 同 的 平台 或 语言 中 可 能 有 所 差别 。 当 使 用 DOM 处 理 HTML 文档 时 ， 
将 主要 用 到 下 列 4 个 核心 对 象 : 
。 Document 对 象 , 表示 一 个 HTML 文档 的 根 节点 , 代表 整个 HTML 文档 。Document 
对 象 可 创建 属于 该 文档 的 各 种 节点 ， 或 将 外 部 文档 的 节点 导入 到 该 文档 。 

。 Node 对 象 ， 表 示 HTML 文档 的 一 个 节点 。Node 对 象 是 其 他 大 多 数 对 象 的 父 类 ， 
如 Document、Element、Attribute 与 Text 等 对 象 都 是 从 Node 对 象 继承 过 来 的 。 

。 NodeList 对 象 ， 表 示 一 个 节点 的 集合 ， 它 包含 了 某 个 节点 中 的 所 有 子 节点 ， 并 且 支 
持 对 该 节点 列表 的 遍历 。 

。 Element 对 象 ， 表 示 一 个 HTML 文档 的 元 素 节点 。 


?4.6.2” Document 对 象 


Document 对 象 代表 HIML DOM 树 的 根 节 点 ， 也 称 为 文档 对 象 ， 代 表 整 个 HIML 文 
档 ， 提 供 了 对 文档 中 的 数据 进行 操作 的 入 口 。Document 对 象 是 DOM 的 基础 ， 可 以 利用 它 
所 包含 的 属性 和 方法 来 浏览 、 查 询 和 修改 HIML 文档 的 内 容 和 结构 。Document 表示 了 树 
的 顶层 节点 ， 它 实现 了 DOM 文档 的 所 有 的 基本 方法 〈 例 如 创建 各 种 类 型 的 节点 )， 它 创建 
了 一 个 文档 对 象 ， 所 有 其 他 的 对 象 都 可 以 从 这 个 文档 对 象 中 得 到 和 创建 。 

Document 对 象 的 属性 和 方法 见 表 4-8 和 表 4-9。 


表 4-8 document 对 象 的 属性 
































属性 具体 描述 

body 提供 对 文档 中 body 元 素 的 访问 

cookie 设置 或 返回 与 当前 文档 有 关 的 所 有 cookie 

domain 返回 下 载 当前 文档 的 服务 器 域名 

lastModified 返回 文档 最 后 被 修改 的 日 期 和 时 间 

Teferrer 返回 载 入 当前 文档 的 URL 

title 返回 当前 文档 的 标题 ( HTML title 元 素 中 的 文本 ) 
URL 返回 当前 文档 的 URL 
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表 4-9 Document 对 象 的 方法 





方法 具体 描述 
close0 关闭 用 document.open0 方 法 打开 的 输出 流 ， 并 显示 选 定 的 数据 
getElementByIdO 根据 指定 的 芭 属性 值得 到 对 应 的 DOM 对 象 


getElementsByName() 根据 指定 的 Name 属性 值得 到 对 应 的 DOM 对 象 
getElementsByTagName() ”返回 指定 标记 名 的 对 象 的 集合 


open() 打开 一 个 流 ， 以 收集 来 自 documentwrite0 或 document writeln(0 方 法 的 输出 
writeO 向 文档 写 入 HTML 表达 式 或 JavaScript 代码 
writeln() 等 同 于 write0 方 法 ， 不 同 的 是 在 每 个 表达 式 之 后 写 一 个 换行 符 
createElement() 在 文档 中 创建 一 个 元 素 节点 
createAttribute() 创建 属性 节点 
createTextNode() 创建 新 的 文本 节点 

【 例 4-15】 获取 文本 框 的 内 容 。 

<html> 

<head> 


<script type="text/javascript"> 

function getValue () 

| 

var x=document .getElementBYId("myinput") // 获 取 文 本 框 节点 
alert (x.value) // 显 示 文本 框 的 内 容 
} 

</script> 

</head> 

<input type="text" id="myinput"> 

<button type="button" name="" onclick="getValue ()"/> 获 取 文本 框 的 内 容 </button> 
</form> 

</html> 


getElementById() 方 法 是 DOM 中 频繁 使 用 的 一 个 方法 。 它 获取 HTML 文档 的 一 个 特定 
元 素 并 且 返 回 一 个 对 它 的 引用 。 为 了 获取 元 素 ， 此 元 素 必须 具有 一 个 ID 属性 。 

当 只 获取 一 个 元 素 时 ，getElementById() 方 法 工作 得 很 好 ， 但 是 当 需 要 同时 获取 超过 一 
个 的 元 素 时 ， 就 发 现 getElementsByTagName() 方 法 更 合适 。 后 者 是 通过 数组 或 者 列表 的 格 
式 返 回 指定 标记 类 型 的 所 有 元 素 。 

例如 document.getElementsByTagName("p") 返 回 所 有 标记 为 <zp> 的 元 素 。 

?4.6.3 Node (节点 ) 对 象 


Node 是 文档 对 象 模型 中 的 基本 对 象 ， 元 素 、 属 性 、 注 释 、 处 理 指令 和 其 他 的 文档 组 件 
都 可 以 认为 是 Node。 事 实 上 ，Document 对 象 本 身 也 是 一 个 Node 对 象 。 

Node 对 象 的 attributes 和 childNodes 属性 对 于 遍历 DOM 树 是 非常 有 用 的 ， 它 们 是 与 
当前 节点 相关 的 节点 的 集合 。 另 外 ， 其 他 几 个 属性 ， 如 firstChild、lastChild、nextSibling 
等 ， 也 可 为 在 树 中 遍历 时 导航 。 典 型 的 Node 节点 对 象 及 其 属性 含义 如 图 4-7 所 示 。 
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4-7 典型 的 Node 节点 及 其 属性 含义 





Node 对 象 支持 的 方法 可 以 用 来 操纵 当前 节点 及 其 子 节点 ， 这 些 方法 包括 创建 、 选 择 、 
插入 、 删 除 和 XSL 变换 子 节点 等 操作 。 
Node 对 象 的 常用 属性 和 方法 见 表 4-10 和 表 4-11。 


表 4-10 Node 对 象 的 常用 属性 

















属性 描述 
attributes 如 果 该 节点 是 一 个 Element， 则 以 NamedNodeMap 形式 返回 该 元 素 的 属性 
childNodes 以 Node[] 的 形式 存放 当前 节点 的 子 节点 。 如 果 没 有 子 节点 ， 则 返回 空 数组 。 可 通过 
数组 索引 方式 访问 ， 比 如 : childNodes[2] 
firstChild 以 Node 的 形式 返回 当前 节点 的 第 一 个 子 节点 。 如 果 没有 子 节点 ， 则 为 null 
innerHTML 用 于 获取 或 设置 HTML 元 素 的 内 容 
lastChild 以 Node 的 形式 返回 当前 节点 的 最 后 一 个 子 节点 。 如 果 没 有 子 节点 ， 则 为 null 
nextSibling 以 Node 的 形式 返回 当前 节点 的 下 一 个 兄弟 节点 。 如 果 没有 这 样 的 节点 ， 则 返回 null 
nodeName 节点 的 名 字 ，Element 节点 则 代表 Element 的 标记 名 称 。 例 如 <p> 元 素 返 回 p 
nodeType 代表 节点 的 类 型 。1 表示 此 节点 是 元 素 ，2 表示 属性 〈attribute); 3 表示 文本 项 
nodeValue 返回 一 个 字符 串 ， 表 示 文 本 项 节点 的 值 。 如 果 是 其 他 类 型 的 节点 ， 返 回 null 
parentNode 以 Node 的 形式 返回 当前 节点 的 父 节点 。 如 果 没 有 父 节 点 ， 则 为 null 
previousSibling ”以 Node 的 形式 返回 紧 挨 当前 节点 、 位 于 它 之 前 的 兄弟 节点 。 如 果 没 有 这 样 的 节点 ， 
则 返回 null 
表 4-11 Node 对 象 的 常用 方法 
方法 描述 
appendChild0 ”通过 把 一 个 节点 增加 到 当前 节点 的 childNodes[] 组 ， 给 文档 树 增加 节点 
cloneNode() 复制 当前 节点 ， 或 者 复制 当前 节点 以 及 它 的 所 有 子孙 节点 
hasChildNodes() ”如 果 当 前 节点 拥有 子 节点 ， 则 返回 true 
insertBefore() 给 文档 树 插入 一 个 节点 ,位 置 在 当前 节点 的 指定 子 节点 之 前 。 如 果 该 节点 已 经 存在 ， 
则 删除 之 再 插入 到 它 的 位 置 
removeChild() ”从 文档 树 中 删除 并 返回 指定 的 子 节点 
replaceChild0 ”从 文档 树 中 删除 并 返回 指定 的 子 节点 ， 用 另 一 个 节点 替换 它 





下 面 介绍 Node 对 象 的 常用 属性 和 方法 。 
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1. innerHTML 属性 

innerHTML 属性 是 最 常用 的 DOM 的 属性 ， 用 于 获取 或 设置 HTML 元 素 的 内 容 。 例 
如 ， 使 用 p 元 素 的 mnerHTML 属性 可 以 获取 或 设置 p 元 素 的 内 容 。 

【 例 4-16】 使 用 innerHTML 属性 的 例子 。 


<html> 

<body> 

<p id="intro">Hello World!</p> 

<script> 

Var txt=document .getElementById("intro") .innerHTML; 
document .write (txt);// 输 出 Hello World! 

</script> 

</body> 

</html> 


浏览 结果 如 下 : 


Hello World! 
Hello World! 


2. firstChild 属性 和 lastChild 属性 

firstChild 属性 可 返回 DOM 节点 对 象 的 首 个 子 节点 。lastChild 属性 可 返回 DOM 节点 
对 象 的 最 后 一 个 子 节点 。 

【 例 4-17】 使 用 firstChild 属性 和 lastChild 属性 的 例子 。 


<html> 
<body> 
<div id="abc"><p>DIV 的 子 对 象 1</p><p>DIV 的 子 对 象 2</p><p>DIV 的 子 对 象 3</p> 
</div> 
<script language="javascript"> 
var nodel= document.getElementById('abc'); //Node 对 象 
document .write (nodel.haschildNodes ()+"<BR>") ;// 输 出 true 


var nodes=nodel.childNodes; // 当 前 节点 nodel 的 子 节点 数组 
document .write (" 子 节点 数量 :"+nodes .length+"<BR>") ; // 子 节点 数量 
for (var i=0,len=nodes.length;i<len;i++){ // 遍 历 所 有 子 节点 
if (nodes [i] .nodeType==1) { // 元 素 节点 
document .write ("第 "+i+" 个 子 节点 :"+nodes [i] .innerHTML+"<BR>"); 
/7/ 输 出 第 工 个 节点 内 容 


} 
document .write (nodes[1] .innerHTML+"<BR>");  // 输 出 "DIV 的 子 对 象 2" 
document .write (nodel .firstChild+"<BR>"); // 输 出 [object 
HTMLParagraphElement] 
document .write (nodel.firstchild.nodeType+"<BR>");// 输 出 1，1 表示 此 节点 类 
型 是 元 素 


document .write (nodel.lastchild+"<BR>"); // 输 出 [object 
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HTMLParagraphElement] 
document .write (nodel.lastchild.innerHTML+"<BR>") ;// 输 出 "DIV 的 子 对 象 3" 
</script> 
</body> 
</html> 


浏览 结果 如 下 : 


true 

子 节点 数量 :3 

第 0 个 子 节点 :DIV 的 子 对 象 1 

第 1 个 子 节点 :DIV 的 子 对 象 2 

第 2 个子 节点 :DIV 的 子 对 象 3 

DIV 的 子 对 象 2 

[object HTMLParagraphElement] 
[object HTMLParagraphElement] 
DIV 的 子 对 象 3 


注意 : IE 8.0 及 其 以 下 版 本 的 浏览 器 会 忽略 节点 间 的 空白 节点 (空格 、 回 车 和 Tab 键 )， 
遵循 W3C 规范 的 浏览 器 (Chrome、FireFox、Safari 等 ) 则 会 把 这 些 空白 作为 文本 节点 处 
理 。 所 以 上 例 中 <div id="abc"> 中 的 信息 不 能 有 空格 、 回 车 等 ， 否 则 会 多 出 许多 文本 节点 。 

3. appendChild() 方 法 

appendChild() 方 法 用 于 把 新 的 子 节点 添加 到 指定 节点 中 ， 并 将 添加 的 节点 放 在 最 后 。 

语法 如 下 : 


nodeObject .appendchild (newchild) 


appendChild() 方 法 返回 新 的 子 节点 对 象 。 
【 例 4-18】 使 用 appendChild0 方 法 给 <div id="abc"> 再 添加 1 个 段落 <p> 的 例子 。 


<html> 
<HEAD><TITLE> 演 示 使 用 appendCchild() 方 法 的 例子 </TITLE></HEAD> 
<body> 
<div id="abc"><p>DIV 的 子 对 象 1</p><p>DIV 的 子 对 象 2</p><p>DIV 的 子 对 象 3</p></div> 
<div id="board"></div> 
<script type="text/javascript"> 
var p = document .getElementById ("abc"); // 获 取 Id 为 "abc" 的 元 素 
var e = document.createElement ("p"); // 产 生 新 的 元 素 节点 e 


e.innerHTML = "DIV 的 子 对 象 4"; // 设 置 元 素 节点 的 文字 内 容 
p.appendchild(e) // 添 加 子 节点 e 
</script> 
</body> 
</html> 


程序 中 产生 新 的 元 素 节点 e, 设置 元 素 节 点 的 文字 内 容 为 "DIV 的 子 对 象 4"。 在 id="abe" 
的 div 元 素 中 通过 appendChild0) 方 法 增加 这 个 节点 e( 即 1 个 段落 <p>)。 浏 览 结 果 如 下 : 
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DIV 的 子 对 象 1 
DIV 的 子 对 象 2 
DIV 的 子 对 象 3 
DIV 的 子 对 象 4 


4. removeChild() 方 法 
removeChild() 方 法 可 从 子 节点 列表 中 删除 某 个 节点 ， 语 法 如 下 : 


nodeObject .removeChild (node) 


参数 node 指定 要 删除 的 节点 。 
例如 ， 删 除 id="demo" 的 节点 的 语句 为 : 


Var thisNode=document .getElementById ("demo"); 
thisNode.parentNode.removeNode (thisNode); 


通过 thisNode.parentNode 获取 thisNode 的 父 节 点 ， 从 父 节点 中 删除 thisNode 节点 。 
【 例 4-19】 使 用 removeChild() 方 法 删除 <div id="abc"> 中 1 个 段落 <p> 的 例子 。 


<html> 
<HEAD><TITLE> 演 示 使 用 removechild () 方 法 的 例子 </TITLE></HERD> 
<body> 
<div id="abc"><p>DIV 的 子 对 象 1</p><p>DIV 的 子 对 象 2</p><p>DIV 的 子 对 象 3</p></div> 
<div id="board"></div> 
<script type="text/javascript"> 
var p = document .getElementById ("abc"); // 获 取 Id 为 "abc" 的 元 素 
var nodes=p.childNodes; 
p.removeChild (nodes[0]); // 删 除 第 一 个 子 节点 e 
</script> 
</body> 
</html> 


浏览 结果 如 下 ， 可 见 第 一 个 <p>DIV 的 子 对 象 1</p> 元 素 被 删除 了 。 


DIV 的 子 对 象 2 
DIV 的 子 对 象 3 


【 例 4-20】 演示 删除 节点 本 身 的 例子 。 


<htm1> 
<HERD><TITLE> 演 示 删 除 节 点 本 身 </TITLE></HERAD> 
<body> 
<div id="demo"> 
<div id="thisNode"> 单 击 删除 我 </div> 
</div> 
<script type="text/javascript"> 
document .getElementById ("thisNode") .onclick=function(){ 
this.parentNode.removeChild (this); 
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} 
</script> 
</body> 
</html> 


浏览 后 单 击 “ 单 击 删除 我 ”div 块 ， 则 此 div 块 消失 。 
5. replaceChild() 方 法 
IeplaceChild() 方 法 用 于 蔡 换 子 节点 。 语 法 如 下 : 


nodeObject .replaceChild (new node,old node) 


参数 new_node 指定 新 的 节点 ， 参 数 old_node 指定 被 替换 的 节点 。 
6. insertBefore() 方 法 
insertBefore() 方 法 用 于 在 指定 的 子 节点 前 面 插 入 新 的 子 节点 。 语 法 如 下 : 


parentElement .insertBefore ( newElement, targetElement ); 


newElement 是 要 插入 的 新 的 子 节点 ,targetElement 是 要 在 其 前 面 插入 新 节点 的 子 节点 ， 
parentElement 是 newElement 和 targetElement 的 父 节 点 。 

插入 成 功 返 回 true ， 失 败 返 回 false。 

例如 ， 在 id="dome" 的 节点 前 面 添加 节点 的 语句 为 : 


var ele_div=document .createElement ("div"); // 新 的 子 节点 
var thisNode=document .getElementById ("demo"); // 指 定 的 子 节点 
thisNode.parentNode.insertBefore (ele div ，thisNode); // 插 入 


注意 : insertBefore() 添 加 节点 时 ， 不 但 要 知道 当前 节点 ， 还 要 知道 当前 节点 的 父 节点 。 
一 般 情况 下 ， 可 以 通过 当前 节点 的 parentNode 属性 来 获取 父 节点 。 
【 例 4-21】 使 用 insertBefore() 在 指定 节点 前 面 不 断 增加 新 节点 。 


<html> 

<body> 

<div id="demo"> 

<div id="thisNode"> 单 击 这 里 添加 新 节点 </div> 

</div> 

<script type="text/javascript"> 

document .getElementById ("thisNode") .onclick=function(){ 
var ele div=document .createElement ("div"); 
Var ele text=document .createTextNode ("这 是 新 节点 "); 
ele div.appendChild(ele text); 
this.parentNode.insertBefore (ele div , this); 

} 

</script> 

</body> 

</html> 


浏览 后 单 击 “ 单 击 这 里 添加 新 节点 ”div 块 ， 则 此 div 块 前 不 断 增加 "这 是 新 节点 "的 
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div 块 。 
7. getAttribute() 方 法 
getAttribute( 方 法 用 于 读 取 对 应 属性 的 属性 值 。 语 法 如 下 : 


属性 值 = getattribute (属性 名 ) 
【 例 4-22】 使 用 getAttribute() 方 法 的 例子 。 


<!DOCTYPE HTML> 

<html> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>getAttribute </title> 

</head> 


iiwle> 
div2">div2</div> 

<div id="div3">div3</div> 
</div> 

<script language="javascript"> 





Var list=document .getElementsByTagName ("div"); 

Var mydiv=list["div2"] .getAttribute ("id"); 

alert (' 用 1ist["div2"] 取 到 第 2 个 id 的 属性 的 属性 值 : '+mydiv); 
</script> 
</body> 
</html> 


8. setAttribute() 方 法 
把 指定 属性 设置 或 修改 为 指定 的 值 。 语 法 如 下 : 


obiect.setAttribute (属性 名 , 值 ) 
【 例 4-23】 使 用 setAttribute() 方 法 的 例子 。 将 “style” 属 性 值 改 成 “color:yellow”。 


<!DOCTYPE HTML> 
<html> 
<head><title>setAttribute </title></head> 
<body> 
<script language="JavaSscript"> 
function change() { 
Var input = document .getElementById ("pl1"); 
input .setRttribute ("style", "color:yellow"); 
alert (input .getAttribute ("style")); 
} 
</script> 
<p id="pl" style="color:red;"> 你 好 </p> 
<input type="button" value=" 改 变 颜 色 " onclick="change();"> 
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</body> 
</html> 


单 击 “ 改 变 颜色 ”按钮 ， 则 “你 好 ”的 文字 颜色 从 红色 变 成 黄色 。 
? 4.6.4 NodeList 对 象 


NodeList 对 象 是 有 顺序 关系 的 一 组 节点 〈 比 如 某 个 节点 的 子 节点 列表 )。 在 DOM 中 ， 
对 文档 的 改变 ， 会 直接 反映 到 相关 的 NodeList 对 象 中 ， 而 不 需 DOM 应 用 程序 再 做 其 他 额 
外 的 操作 。 
NodeList 对 象 通常 可 以 通过 以 下 三 种 途径 得 到 : 访问 某 个 节点 的 childNodes 属性 〈 例 4-17 
中 使 用 过 )、 调 用 selectNodes 方法 ， 以 及 执行 一 个 Document 对 象 的 getElementByTagName 
方法 。 
【 例 4-24】 使 用 getElementByTagName 得 到 NodeList 对 象 的 例子 。 
<html> 
<body> 
<div id="div1"><p id="p1"> 我 是 第 一 个 P</p><p id="p2"> 我 是 第 二 个 P</p></div> 
<script language="JavaScript"> 
Var str = document .getElementsByTagName ("p") [1] .innerHTML; 
document .write ("1:"+str+"<BR>"); // 输 出 我 是 第 二 个 P， 因 为 索引 从 0 开始 
Var arr = document .getElementsByTagName ("p"); 
for (var i = 0; i < arr.length; i++) // 循 环 遍历 
document .write(arr[i] .innerHTML+"<BR>"); 
Var node = document .getElementById ("div1"); 
var nodel = document .getElementsByTagName ("p") [1];// 从 获取 到 的 元 素 再 获取 
document .write ("2:"+nodel .innerHTML+"<BR>"); // 输 出 我 是 第 二 个 P 
</script> 
</body> 
</html> 


浏览 结果 如 下 : 


1: 我 是 第 二 个 P 
我 是 第 一 个 
我 是 第 二 个 
2: 我 是 第 二 个 了 


本 章 介绍 了 DOM (文档 对 象 模型 )， 它 是 JavaScript 脚本 与 HIML 文档 之 间 联 系 的 纽 
带 。 支 持 DOM 的 浏览 器 在 载 入 HIML 文档 时 按照 DOM 规范 将 文档 节点 化 形成 节点 树 ， 
JavaScript 通过 DOM 提供 的 诸如 getElementById()、removeAttribute() 等 方法 ， 可 对 节点 树 
中 的 任何 已 节点 化 的 元 素 进行 访问 和 修改 属性 等 操作 ， 并 通过 createTextNode()、 
appendChild() 等 方法 迅速 生成 新 节点 并 进行 相关 操作 ， 甚 至 动态 生成 指定 的 HIML 文档 。 
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使 用 Canvas 画图 





HTML4 的 画图 能 力 很 弱 ， 通 常 只 能 在 网 页 中 显示 指定 的 图 像 文件 。HTML5 提供 了 
Canvas 元 素 ， 可 以 在 网 页 中 定义 一 个 画布 ， 然 后 使 用 Canvas 绘图 方法 在 画布 中 画图 。 在 
游戏 开发 中 大 量 使 用 Canvas 画图 。 本 章 介 绍 在 HIML5 中 如 何 使 用 Canvas 画图 。 


Canvas 元 素 


Canvas 就 是 画布 , 可 以 进行 画 任何 的 线 、 图 形 、 填 充 等 一 系列 的 操作 。Canvas 是 HTML5 
出 现 的 新 元 素 ， 它 有 自己 的 属性 、 方 法 和 事件 ， 其 中 就 有 绘图 的 方法 ，JavaScript 能 够 调用 
Canvas 绘图 方法 来 进行 绘图 。 另 外 Canvas 不 仅仅 提供 简单 的 二 维 矢量 绘图 ， 也 提供 了 三 
维 的 绘图 ， 以 及 图 片 处 理 等 一 系列 的 API 支持 。 
?5.1.1 Canvas 元 素 的 定义 语法 


Canvas 元 素 的 定义 语法 如 下 : 
<canvas id="xxx" height=. width=..>..</canvas> 


Canvas 元 素 的 常用 属性 如 下 : 

id 是 Canvas 元 素 的 标识 ; height 是 Canvas 画布 的 高 度 ， 单位 为 像素 ; width 是 Canvas 
画布 的 宽度 ， 单 位 为 像素 。 

例如 在 HTML 文件 中 定义 一 个 Canvas 画布 ，id 为 myCanvas， 高 和 宽 各 为 100 像素 ， 
代码 如 下 : 

<canvas id="myCanvas" height=100 width=100> 

您 的 浏览 器 不 支持 canvas。 


</canvas> 


<canvas> 和 之 间 的 字符 串 </canvas> 指 定 当 浏览 器 不 支持 Canvas 时 显示 的 字符 串 。 
注意 : Internet Explorer 9、Firefox、Opera、Chrome 和 Safari 支持 Canvas 元 素 。Internet 
Explorer 8 及 其 之 前 版 本 不 支持 Canvas 元 素 。 
? i C 






如 下 : 


document .getElementById (对 象 id) 
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例如 ， 获 取 定 义 的 myCanvas 对 象 的 代码 如 下 : 


<canvas id="myCanvas" height=100 width=100> 
您 的 浏览 器 不 支持 canvas。 

</canvas> 

<script type="text/javascript"> 

Var c=document .getElementById ("myCanvas"); 
</script> 


得 到 的 对 象 c 即 为 myCanvas 对 象 。 要 在 其 中 绘图 还 需要 获得 myCanvas 对 象 的 24 上 
下 文 对 象 ， 代 码 如 下 : 


var ctx=c.getContext ("2d") ;// 获 得 myCanvas 对 象 的 2d 上 下 文 对 象 


Canvas 绘制 图 形 都 是 依靠 Canvas 对 象 的 上 下 文 对 象 。 上 下 文 对 象 用 于 定义 如 何在 画 
布 上 绘图 。 顾名思义 ，2d 上 下 文 支持 在 画布 上 绘制 2D 图 形 、 图 像 和 文本 。 


坐标 与 颜色 





在 实际 的 绘图 中 ， 我 们 所 关注 的 一 般 都 是 指 设备 坐标 系 ， 此 坐标 系 以 像素 为 单位 ， 像 
素 指 的 是 屏幕 上 的 亮点 。 每 个 像素 都 有 一 个 坐标 点 与 之 对 应 ， 左 上 角 的 坐标 设 为 0，0)， 
向 右 为 X 正 轴 ， 向 下 为 Y 正 轴 。 一般 情况 下 以 (x，y) 代表 屏幕 上 某 个 像素 的 坐标 点 ， 其 
中 水 平 以 X 坐标 值 表示 ， 垂 直 以 Y 坐标 值 表示 。 例 如 ， 在 图 5-1 所 示 的 坐标 系统 中 画 一 个 
点 ， 该 点 的 坐标 (x，?y) 是 (4，3)。 





O12345 X 轴 
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图 5-1 Canvas 坐标 的 示意 图 


计算 机 作 图 是 在 一 个 事先 定义 好 的 坐标 系统 中 进行 的 ， 这 与 日 常生 活 中 的 绘图 方式 有 
着 很 大 的 区 别 。 图 形 的 大 小 、 位 置 等 都 与 绘图 区 或 容器 的 坐标 有 关 。 
1. 颜色 关键 字 


W3C 的 HTML 4.0 标准 仅 支持 16 种 颜色 名 ， 它 们 是 aqua、black、blue、fuchsia、 
gray、green、lime、maroon、navy、olive、purple、red、silver、teal、white、yellow。 如 果 


需要 使 用 其 他 的 颜色 ， 需 要 使 用 十 六 进 制 的 颜色 值 。 
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2. 十 六 进 制 颜色 值 

可 以 使 用 一 个 十 六 进 制 的 字符 串 表 示 颜 色 ， 格 式 为 垦 GB。 其 中 ，R 表示 红色 分 量 ，G 
表示 绿色 分 量 ，B 表示 蓝 色 分 量 。 每 种 颜色 的 最 小 值 是 0 (十 六 进 制 : #00)。 最 大 值 是 255 
(十 六 进 制 : 姓 F )。 例 如 眶 F0000 表示 红色 , #00FF00 表示 绿色 , #0000FF 表示 蓝 色 , #A020F0 
表示 紫色 ， 考 FFFFF 表示 白色 ，#000000 表示 黑色 。 

3. RGB 颜色 值 

RGB 颜色 值 可 以 使 用 如 rgb( 红 色 分 量 , 绿 色 分 量 , 蓝 色 分 量 ) 形 式 表示 颜色 。 表 5-1 是 十 
六 进 制 字符 串 表 示 颜 色 与 RGB 颜色 值 的 对 照 表 。 


表 5-1 十 六 进 制 颜色 值 与 RGB 颜色 值 对 照 表 








Color HEX Color RGB 颜色 Color HEX Color RGB 颜色 
#000000 rgb(0,0,0) 黑色 #00FFFF rgb(0,255,255) 青色 
#FF0000 rgb(255,0,0) 红色 #EFOOFF rgb(255,0,255) 深 红 
#00FF00 rgb(0,255,0) 绿色 #C0COCO rgb(192,192,192) ”灰色 
#0000FF rgb(0,0,255) 蓝 色 #FFFFFF rgb(255,255,255) ”白色 
#FFFF00 rgb(255,255.0) 黄色 #EF8000 Tgb(255.128.0) 枯黄 


绘制 图 形 
“5.3.1 绘制 直线 


在 JavaScript 中 可 以 使 用 Canvas API 绘制 直线 ， 具 体 过 程 如 下 : 
(1) 在 网 页 中 使 用 Canvas 元 素 定义 一 个 Canvas 画布 ， 用 于 绘画 。 


Var c=document .getElementBYId("myCcanvas") ; // 获 取 网 页 中 的 canvas 对 象 


(2) 使 用 JavaScript 获取 网 页 中 的 Canvas 对 象 ， 并 获取 Canvas 对 象 的 24 上下文 ctx。 
使 用 2d 上 下 文 可 以 调用 Canvas API 绘制 图 形 。 


var ctx=c.getContext ("2d"); // 获 取 canvas 对 象 的 上 下 文 
(3) 调用 beginPath() 方 法 ， 指 示 开 始 绘图 路 径 ， 即 开始 绘图 。 语 法 如 下 : 
ctx.beginPath() 

(4) 调用 moveTo() 方 法 将 坐标 移 至 直线 起 点 。moveTo() 方 法 的 语法 如 下 : 
ctx.moveTo (x, y); 


x 和 y 为 要 移动 至 的 坐标 。 
(5) 调用 lineTo0 方 法 绘制 直线 。lineTo0 方 法 的 语法 如 下 : 


ctx.lineTo (x, y); 


x 和 y 为 直线 的 终点 坐标 。 
(6) 调用 stroke0 方 法 ， 绘 制图 形 的 边界 轮廓 。 语 法 如 下 : 


ctx. stroke(); 
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【 例 5-1】 使 用 连续 画 线 的 方法 绘制 一 个 三 角形 ， 代 码 如 下 : 


<!DOCTYPE html> 

<html> 

<body> 

<canvas id="myCanvas" height=200 width=200> 您 的 浏览 器 不 支持 canvas。</canvas> 
<script type="text/javascript"> 

function drawtriangle () 

{ 


var c=document .getElementById ("myCanvas"); // 获 取 网 页 中 的 canvas 对 象 
Var ctx=c.getContext ("2d"); // 获 取 canvas 对 象 的 上 下 文 
ctx.beginPath(); // 开 始 绘图 路 径 


ctx.moveTo (100,0); // 将 坐标 移 至 直线 起 点 
ctx.lineTo (50,100); // 绘 制 直线 
ctx.lineTo (150,100); ”// 绘 制 直线 
ctx.lineTo (100,0); // 绘 制 直线 


ctx.closePath (); // 闭 合 路 径 ， 不 是 必需 的 ， 如 果 线 的 终点 跟 起 点 一 样 会 自动 闭合 
ctx.stroke (); // 通 过 线条 绘制 轮廓 〈 边 框 ) 

} 

window.addEventListener ("load", drawtriangle, true); 

</script> 

</body> 

</html> 


浏览 例 5-1 的 结果 如 图 5-2 所 示 。 


图 5-2 ”Canvas 绘制 一 个 三 角形 


【 例 5-2】 一 个 通过 画 线 绘制 复杂 菊花 图 形 的 例子 。 


<!DOCTYPE html> 
<html> 
<body> 
<canvas id="myCanvas" height=1000 width=1000> 您 的 浏览 器 不 支持 canvas。</canvas> 
<script type="text/javascript"> 
function drawline() 
{ 
Var c=document .getElementById ("myCanvas"); // 获 取 网 页 中 的 canvas 对 象 
var ctx=c.getContext ("2d"); // 获 取 canvas 对 象 的 上 下 文 
var dx=150; 
var dy=150; 
var sys = L100 
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ctx.beginPath () 7 // 开 始 绘图 路 径 
var x = Math.sin(0); 
Var y = Math.cos(0); 
var dig=Math.PI/15*11; 
for(var i = 0;i<30;i++){ 
Var x = Math.sin(i*dig); 
var y = Math.cos (i*dig); 
// 用 三 角 函 数 计算 项 点 
ctx.lineTo (dx+x*s, dy+y*s); 
} 
ctx.closePath (); 
ctx.stroke(); 
} 
window.addEventListener ("load", drawline, true); 
</script> 
</body> 
</html> 


浏览 例 5-2 的 结果 如 图 5-3 所 示 。 





布 中 绘制 矩形 。 其 中 ， 前 两 个 方法 用 于 绘制 矩形 边框 ， 调 用 fillRect0) 可 以 填充 指定 的 矩形 
区 域 ， 调 用 clearRect 0 可 以 擦 除 指定 的 矩形 区 域 。 

1. rect() 

rect() 用 于 创建 矩形 ，rect0 方 法 的 语法 如 下 





rect (x, y, width, height) 

参数 说 明 如 下 : 

x 是 矩形 的 左上 角 的 义 坐标 ; y 是 矩形 的 左上 角 的 Y 坐标 ; width 是 矩形 的 宽度 ; height 
是 矩形 的 高 度 。 

【 例 5-3】 使 用 rect(O 方 法 绘制 矩形 边框 的 例子 。 


<canvas id="myCanvas" height=500 width=500> 您 的 浏览 器 不 支持 canvas。</canvas> 
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<script type="text/javascript"> 

function drawRect () 

¥ 
var c=document .getElementById ("myCanvas"); // 获 取 网 页 中 的 canvas 对 象 
var ctx=c.getContext ("2d"); ”// 获 取 canvas 对 象 的 上 下 文 


ctx.beginPath (); // 开始 绘图 路 径 ， 绘 制 起 始点 
ctx-rect(207207 1007 S50) 
ctx.stroke(); // 通 过 线条 绘制 轮廓 (边框 ) 


} 
window.addEventListener ("load", drawRect, true); 
</script> 


2. strokeRect() 
strokeRectO 绘 制 矩形 〈 无 填充 )，strokeRect( 方 法 的 语法 如 下 : 


strokeRect (x, y, width, height) 


参数 的 含义 与 rect() 方 法 的 参数 相同 。strokeRect() 方 法 与 rect() 方 法 的 区 别 在 于 调用 


strokeRect() 方 法 时 不 需要 使 用 beginPath0 和 stroke0 即 可 绘图 。 


3. filRect() 和 clearRect() 
fllRectO 绘 制 “ 被 填充 ”的 矩形 ，filRect() 方 法 的 语法 如 下 : 


fillRect (x, y, width, height) 


参数 的 含义 与 rect0 方 法 的 参数 相同 。 
clearRect() 清 除 给 定 矩 形 内 的 图 像 : 


clearRect (x, y, width, height) 


参数 的 含义 与 rect0 方 法 的 参数 相同 。 
【 例 5-4】 Canvas 绘制 一 个 矩形 和 一 个 填充 矩形 的 例子 。 


<!DOCTYPE html> 
<html> 
<body> 
<canvas id="demoCanvas" width="500" height="500"> 您 的 浏览 器 不 支持 canvas。 
</canvas> 
<!--- 下 面 将 演示 一 种 绘制 矩形 的 demo---> 
<script type="text/javascript"> 
var c = document .getElementById ("demoCanvas") ; // 获 取 网 页 中 的 canvas 对 象 


var context = c.getContext ('2d'); // 获 取 上 下 文 
context .strokestyle = "red"; // 指 定 绘制 线 样式 、 颜 色 
context . strokeRect (10, 10, 190, 100); / /绘制 矩形 线条 ， 内 容 是 空 的 
// 以 下 填充 矩形 
context .fillstyle = "blue"; 
context .fillRect (110,110,100,100); / /绘制 填充 矩形 

</acript> 


</body> 
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5.3.3 绘制 辆 弧 


可 以 调用 arc( 方 法 绘制 圆 弧 ， 语 法 如 下 : 
arc(centerx, centerYy, radius, startingAngle, endingAngle, antiClockwise); 


参数 说 明 如 下 : 

centerX， 圆 弧 圆 心 的 义 坐标 ; centerY， 圆 弧 圆 心 的 Y 坐标 ; radius， 圆 弧 的 半径 ; 
startingAngle， 圆 弧 的 起 始 角 度 ; endingAngle， 圆 弧 的 结束 角度 ; antiClockwise， 是 否 按 道 
时 针 方向 绘图 。 

例如 : 使 用 arc0 方 法 绘制 圆心 为 (50，50)， 半 径 为 100 的 圆 弧 。 圆 弧 的 起 始 角度 为 
60”， 圆 弧 的 结束 角度 为 180”。 


ctx.beginPath(); // 开始 绘图 路 径 
CEX-azrcl(50，50 100; 1173 Math,PIy. 1 * Math.PI, false); 


ctx.stroke(); 
【 例 $-$】 使 用 arc0 方 法 画 圆 的 例子 。 


<canvas id="myCanvas" height=500 width=500> 您 的 浏览 器 不 支持 canvas。</canvas> 
<script type="text/javascript"> 





function draw() 
{ 
var c=document .getElementById ("myCanvas"); // 获 取 网 页 中 的 canvas 对 象 
Var ctx=c.getContext ("2d");  ”// 获 取 canvas 对 象 的 上 下 文 
var radius = 100; 
Var startingAngle = 0; 
Var endingAngle = 2 * Math.PI; 
ctx.beginPath (); // 开始 绘图 路 径 
ctx.arc(150, 150, radius, startingAngle, endingAngle, false); 
ctx.stroke(); 
} 
window.addEventListener ("load", draw, true); 


</script> 
描 边 和 填充 


HH 








通过 设置 Canvas 的 上 下 文 2D 对 象 的 strokeStyle 属性 可 以 指定 描 边 的 颜色 , 通过 设置 
上 下 文 2D 对 象 的 lineWidth 属性 可 以 指定 描 边 的 宽度 。 
例如 : 通过 设置 描 边 颜色 和 宽度 来 绘制 红色 线条 宽度 为 10 的 圆 。 


ctx.linewidth = 10; // 描 边 宽度 为 10 
ctx.strokestyle = "red"; // 描 边 颜色 红色 
ctxare(0,. SO 100, 0% 2 * Math Pr false)s 


ctxsstroke(t}s 
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“5.4.2 “填充 图 形 内 部 








通过 设置 Canvas 的 上 下 文 2D 对 象 的 fillStyle 属性 可 以 指定 填充 图 形 内 部 的 颜色 。 
【 例 S-6】 填充 图 形 内 部 的 例子 。 


<canvas id="myCanvas" height=500 width=500> 您 的 浏览 器 不 支持 canvas。</canvas> 
<script type="text/javascript"> 
function draw() 
{ 
var c=document .getElementById ("myCanvas"); // 获 取 网 页 中 的 canvas 对 象 


Var ctx=c.getContext ("2d"); // 获 取 canvas 对 象 的 上 下 文 
Ctx.fil11Style = "yellow"; // 填 充 图 形 内 部 的 颜色 为 黄色 


ctx.fillRect (65,65，100，100); // 拢 形 的 宽度 和 高 度 为 100， 内 部 填充 黄色 
| 
window.addEventListener ("load", draw, true); 
</script> 


?5.4.3 ”渐变 颜色 


1. 创建 CanvasGradient 对 象 

CanvasGradient 是 用 于 定义 画布 中 的 一 个 渐变 颜色 的 对 象 。 如 果 要 使 用 渐变 颜色 ， 首 
先 需 要 创建 一 个 CanvasGradient 对 象 。 可 以 通过 下 面 两 种 方法 创建 CanvasGradient 对 象 。 

(1) 以 线性 颜色 渐变 方式 创建 CanvasGradient 对 象 

使 用 Canvas 的 上 下 文 2D 对 象 createLinearGradient() 方 法 可 以 线性 颜色 渐变 方式 创建 
CanvasGradient 对 象 。createLinearGradient() 方法 的 语法 如 下 : 


createLinearGradient (xStart, ystart, xEnd, yEnd) 


参数 xStart 和 yStart 是 渐变 的 起 始点 的 坐标 ， 参 数 xEnd 和 yEnd 是 渐变 的 结束 点 的 坐 
标 。 例 如 : 


var gl = ctx.createLinearGradient (0, 0, 300, 100); 


(2) 以 放射 颜色 渐变 方式 创建 CanvasGradient 对 象 
使 用 Canvas 的 上 下 文 2D 对 象 createRadialGradient() 方 法 可 以 放射 颜色 渐变 方式 创建 
CanvasGradient 对 象 。createRadialGradient() 方 法 的 语法 如 下 : 


createRadialGradient (xStart, ystart, radiusstart, xEnd, yEnd, radiusEnd) 


参数 xStart 和 yStart 是 开始 圆 的 圆心 的 坐标 ，radiusStart 是 开始 圆 的 半径 ， 参 数 xEnd 
和 yEnd 是 结束 圆 的 圆心 的 坐标 ，radiusEnd 是 结束 圆 的 半径 。 

2. 为 渐变 对 象 设 置 颜色 

创建 CanvasGradient 对 象 后 ， 还 需要 为 其 设置 颜色 基准 ， 可 以 通过 CanvasGradient 对 
象 的 addColorStop() 方 法 在 渐变 中 的 某 一 点 添加 一 个 颜色 变化 。 渐 变 中 其 他 点 的 颜色 将 以 
此 为 基准 。addColorStop() 方 法 的 语法 如 下 : 





addColorStop (offset, color) 
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参数 offset 是 一 个 范围 在 0.0 到 1.0 之 间 的 浮 点 值 , 表示 渐变 的 开始 点 和 结束 点 之 间 的 
一 部 分 。offset 为 0 对 应 开始 点 ，offset 为 1 对 应 结束 点 。Color 指定 offset 显示 的 颜色 。 沿 
着 渐变 某 一 点 的 颜色 是 根据 这 个 值 以 及 任何 其 他 的 颜色 色 标 来 插值 的 。 

var canvas=document .getElementById ("myCanvas");// 获 取 网 页 中 的 canvas 对 象 


Var ctx = canvas.getContext ('2d"'); 
var gl = ctx.createLinearGradient (0, 0, 300, 100); 


gl.addCcolorStop (0, 'rgb(0,0,255)"'); // 蓝 
gl.addColorstop (0.4, 'rgb(255,255,255)"'); // 自 
gl.addcolorstop(1, 'rgb(255,0,0)"'); // 红 


程序 代码 的 示意 图 如 图 5-4 所 示 。 


起 点 偏 移 量 为 0， 颜 色 为 蓝 色 
蓝 色 渐 变 到 白色 


起 点 偏 移 量 为 0.4， 颜 色 为 白色 








一 白色 渐变 到 红色 


终点 偏 移 量 为 1， 颜 色 为 红色 
5-4 程序 代码 的 运行 结果 


3. 设置 描 边 样式 为 渐变 颜色 
只 要 将 前 面 创建 的 CanvasGradient 对 象 赋值 给 用 于 绘图 的 Canvas 的 上 下 文 2D 对 象 的 
strokeStyle 属性 ， 即 可 使 用 渐变 颜色 进行 描 边 。 例 如 : 


var c=document .getElementById ("myCanvas"); // 获 取 网 页 中 的 canvas 对 象 
Var ctx=c.getContext ("2d"); // 获 取 canvas 对 象 的 上 下 文 

Var Colordiagonal = ctx.createLinearGradient (10,10，100,10) 
ctx.strokestyle = Colordiagonal; 


ctx.stroke (); // 关 闭 绘图 路 径 
【 例 $-7】 使 用 黄 、 绿 、 红 的 放射 渐变 颜色 填充 一 个 圆 。 


<canvas id="myCanvas" height=500 width=500> 您 的 浏览 器 不 支持 canvas。</canvas> 
<script type="text/javascript"> 
function draw() 


var c=document .getElementById ("myCanvas"); // 获 取 网 页 中 的 canvas 对 象 
var ctx=c.getContext ("2d"); // 获 取 canvas 对 象 的 上 下 文 
// 对 角 线 上 的 渐变 


Var Colordiagonal = ctx.createRadialGradient (100,100, 0, 100,100, 100); 
Colordiagonal .addColorstop(0, "red"); 

Colordiagonal .addColorstop(0.5, "green"); 

Colordiagonal .addColorstop(1, "yellow"); 
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Var centerx = 100; 
Var centerY = 100; 
var radius = 100; 
Var startingAngle = 0; 
var endingAngle = 2 * Math.PI; 
ctx.beginPath(); // 开始 绘图 路 径 
ctx.arc (centerX, centerY, radius, startingAngle, endingAngle, false); 
ctx.fillstyle = Colordiagonal; 
ctx.stroke(); 
Le 
} 
window.addEventListener ("load", draw, true); 
</script> 


浏览 例 5-7 的 结果 如 图 5-5 所 示 。 
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图 5-5 ”使 用 黄 、 绿 、 红 的 放射 渐变 颜色 填充 一 个 圆 


‘5. 4. 4 透明 颜色 ne 
在 指定 颜色 时 ， 可 以 使 用 rgba0 方 法 定义 透明 颜色 ， 格式 如 下 
rgbal(r,g,b, alpha) 


其 中 rt 表示 红色 集合 ，g 表示 绿色 集合 ，b 表示 蓝 色 集 合 。r、g、b 都 是 十 进 制 数 ， 取 
值 范 围 为 0~255。alpha 的 取 值 范围 为 0 一 1， 用 于 指定 透明 度 ，0 表示 完全 透明 ，1 表示 不 
透明 。 

【 例 5-8】 使 用 透明 颜色 填充 10 个 连 串 的 圆 ， 模 拟 太阳 光照 射 的 光环 。 


<canvas id="myCanvas" height=500 width=500> 您 的 浏览 器 不 支持 canvas。</canvas> 
<script type="text/javascript"> 





function draw() 
Var canvas=document .getElementById ("myCanvas"); 


if(canvas == null) 
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return false; 
Var context = canvas.getContext ("2d"); 
// 先 绘制 画布 的 底 图 
context .fillSsStyle="yellow"; 
context .fillRect (0,0,400,350); 
// 用 循环 绘制 10 个 圆 形 
var n= 0; 
for (Var i=0 ;i<10;i++){ 
/ /开始 创建 路 径 ， 因 为 圆 本 质 上 也 是 一 个 路 径 ， 这 里 向 canvas 说 明 要 开始 画 了 ， 这 是 起 点 
context .beginPath (); 
context .arc (i*25,i*25,i*10,0,Math.PI*2,true); 
context .fillstyle="rgba(255,0,0,0.25)"; 
context .fill(); // 填 充 刚才 所 画 的 圆 形 


} 
window.addEventListener ("load", draw, true); 
</script> 


浏览 例 5-8 的 结果 如 图 5-6 所 示 。 
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绘制 图 像 与 文字 


? 5.5.1 绘制 图 像 








在 画布 上 绘制 图 像 的 Canvas API 是 drawImage()， 语 法 如 下 : 


drawImage (image, x, y) 
drawImage (image, x, y, width, height) 


drawImage (image, sourceXx, sourceY, sourceWidth, sourceHeight, destx, destyY, 
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destWidth, destHeight) 


参数 说 明 : 
image， 所 要 绘制 的 图 像 ， 必 须 是 表示 <img> 标 记 或 者 图 像 文 件 的 Image 对 象 ， 或 者 是 


Canvas 元 素 。 


x 和 y， 要 绘制 的 图 像 的 左上 角 位 置 ，width 和 height， 绘 制图 像 的 宽度 和 高 度 。 
sourceX 和 sourceY， 图像 将 要 被 绘制 的 区 域 的 左上 角 ; destX 和 destY, 所 要 绘制 的 图 


像 区 域 的 左上 角 的 画布 坐标 ; sourceWidth 和 sourceHeight, 被 绘制 的 原 图 像 区 域 ; destWidth 
和 destHeight， 图 像 区 域 在 画布 上 要 绘制 成 的 大 小 。 


【 例 5-9】 不 同形 式 显示 一 本 图 书 封面 coverjpg。 


<canvas id="myCanvas" height=1000 width=1000> 您 的 浏览 器 不 支持 canvas 。 
</canvas> 
<script type="text/javascript"> 
function draw() 
{ 
Var c=document .getElementById ("myCanvas"); // 获 取 网 页 中 的 canvas 对 象 


Var ctx=c.getContext ("2d") // 获 取 canvas 对 象 的 上 下 文 
var imageobj = new Image(); / /创建 图 像 对 象 
imageObj .src = "cover.jpg"; 


imageObj .onload = function(){ 
ctx.drawImage (imageObj, 0, 0); // 原 图 大 小 显示 
ctx.drawImage (imageobj，250，0，120，160);// 原 图 一 半 大 小 显示 
// 从 原 图 (0, 100) 位 置 开始 截取 中 间 一 块 宽 240* 高 160 的 区 域 ， 原 大 小 显示 在 屏幕 (400, 0) 处 
ctx.drawImage (imageObj], 0, 100, 240, 160, 400, 0, 240, 160); 
] 7 
} 
window.addEventListener ("load", draw, true); 
</script> 


浏览 例 5-9 的 结果 如 图 5-7 所 示 。 
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图 5-7 不 同形 式 显 示 一 本 图 书 的 封面 
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* 5.5.2 组 合 图 形 


在 绘制 图 形 时 ， 如 果 画 布 上 已 经 有 图 形 ， 就 涉及 一 个 问题 : 两 个 图 形 如 何 组 合 。 可 以 
通过 Canvas 的 上 下 文 2D 对 象 的 globalCompositeOperation 属性 来 设置 组 合 方式 。 
globalCompositeOperation 属性 的 可 选 值 如 表 5-2 所 示 。 


表 5-2 globalCompositeOperation 属性 可 选 值 











可 选 值 描述 

Source-over 默认 值 ， 新 图 形 会 覆盖 在 原 有 内 容 之 上 

destination-over 在 原 有 内 容 之 下 绘制 新 图 形 

source-in 新 图 形 会 仅仅 出 现 与 原 有 内 容重 又 的 部 分 ， 其 他 区 域 都 变 成 透明 的 
destination-in 原 有 内 容 中 与 新 图 形 重 又 的 部 分 会 被 保留 ， 其 他 区 域 都 变 成 透明 的 
source-out 只 有 新 图 形 中 与 原 有 内 容 不 重 且 的 部 分 会 被 绘制 出 来 
destination-out 原 有 内 容 中 与 新 图 形 不 重 麦 的 部 分 会 被 保留 

source-atop 新 图 形 中 与 原 有 内 容重 胎 的 部 分 会 被 绘制 ， 并 覆盖 于 原 有 内 容 之 上 
destination-atop 原 有 内 容 中 与 新 内 容重 又 的 部 分 会 被 保留 ， 并 会 在 原 有 内 容 之 下 绘制 新 图 形 
lighter 两 图 形 中 重 肥 部 分 作 加 色 处 理 

darker 两 图 形 中 重用 部 分 作 减 色 处 理 

xor 重合 的 部 分 会 变 成 透明 

copy 只 有 新 图 形 会 被 保留 ， 其 他 都 被 清除 掉 


【 例 5-10】 一 个 矩形 和 圆 的 重 又 效果 。 


<canvas id="myCanvas" height=500 width=500> 您 的 浏览 器 不 支持 canvas。</canvas> 
<script type="text/javascript"> 


function draw() 


1 


} 


ctx. 


c=document .getElementById ("myCanvas"); // 获 取 网 页 中 的 canvas 对 象 


ctx=c.getContext ("2d"); 


.fillstyle = "blue"; 

.fillRect (0,0, 100, 100); // 填 充 蓝 色 的 矩形 
.fillstyle = "red"; 

.globalCompositeOperation = "source-over"; 


centerx = 100; 

CenterY = 100; 

radius = 50; 
startingAngle = 0; 
endingangle = 2 * Math.PI; 


.beginPath(); // 开 始 绘图 路 径 


.arc(centerx, centerY, radius, startingAngle, endingAngle, 


// 绘 制 贺 
SR 


window.addEventListener ("load", draw, true); 


/script> 


// 获 取 canvas 对 象 的 上 下 文 


false); 
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例 5-10 中 蓝 色 正 方形 先 画 ， 红 色 圆 形 后 画 ，source-over 取 值 效果 如 图 5-8 所 示 。 


5-8 ”source-over 取 值 效果 


其 余 取 值 效果 如 图 5-9 所 示 。 
desitination-over Sourcein desitination-in source-out destination-out 
source-atop destination-atop lighter xor copy 


图 5-9 ”globalCompositeOperation 属性 的 不 同 值 效 果 





可 以 使 用 strokeText0 方 法 在 画布 的 指定 位 置 输出 文字 ， 语 法 如 下 : 


strokeText (string text, float x, float y) 

参数 说 明 如 下 : 

string 为 所 要 输出 的 字符 串 ; x 和 y 是 要 输出 的 字符 串 的 位 置 坐标 。 
例如 : 


var c=document .getElementById ("myCanvas"); // 获 取 网 页 中 的 canvas 对 象 


Var CEx=c. gatContext ("20")> // 获 取 canvas 对 象 的 上 下 文 
ctx.strokeText ("中 原 工 学 院 "，100，100); // 在 (100，100) 处 显示 "中 原 工学 院 " 
1. 设置 字体 


可 以 通过 Context font 属性 来 设置 输出 字符 串 的 字体 ， 格 式 如 下 : 
Context.font = "字体 大 小 字体 名 称 " 
例如 : 


var c=document .getElementById ("myCanvas"); // 获 取 网 页 中 的 canvas 对 象 
var ctx=c.getContext ("2d"); // 获 取 canvas 对 象 的 上 下 文 

ctx.font = "40 隶书 "; 

ctx. strokeText ("中 原 工 学 院 "，100，100); 


2. 设置 对 齐 方式 
可 以 通过 Context TextAlign 属性 来 设置 输出 字符 串 的 对 齐 方式 。 可 选 值 为 "left" ( 左 对 
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齐 )、"center"〈 居 中 对 齐 ) 和 "right" (〈 右 对 齐 )。 
例如 : 


ctx.TextAlign = "center"; 


3. 设置 边框 宽度 和 颜色 
可 以 通过 设置 Canvas 的 上 下 文 2D 对 象 的 strokeStyle 属性 指定 输出 文字 的 颜色 。 


Ctx. StrokeStyle = "blue"; 
EEE-EonE = 40gt 过 蔬 “> 
ctx. strokeText (" 中 原 工学 院 "，100，100) 


4. 填充 字体 内 部 
使 用 strokeText() 方 法 输出 的 文字 是 中 空 的 ， 只 绘制 了 边框 。 如 果 要 填充 文字 内 部 ， 可 
以 使 用 filText0 方 法 ， 语 法 如 下 : 


fillText (string text, float x, float y) 


可 以 使 用 Context.fillStyle 属性 指定 填充 的 颜色 。 


ctx.fillstyle = "blue"; 


【 例 5-11】 渐变 填充 文字 。 


<canvas id="myCanvas" height=500 width=500> 您 的 浏览 器 不 支持 canvas。</canvas> 
<script type="text/javascript"> 
function draw(){ 
var c=document .getElementById ("myCanvas"); // 获 取 网 页 中 的 canvas 对 象 
var ctx=c.getContext ("2d"); // 获 取 canvas 对 象 的 上 下 文 
Var Colordiagonal = ctx.createLinearGradient (100,100, 300,100); 
Colordiagonal .addColorstop(0, "yellow"); 
Colordiagonal .addColorstop(0.5, "green"); 
Colordiagonal .addColorstop(1, "red"); 
ctx.fillstyle = Colordiagonal; 
ctx.font = "60pt 隶书 "7 
ctx.fillText ("中 原 工学 院 "，100，100); 
} 
window.addEventListener ("load", draw, true); 
</script> 


浏览 例 5-11 的 结果 如 图 5-10 所 示 。 
Om So-ol 


中 原 工 学 院 


5-10 ”渐变 填充 文字 
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图 形 的 操作 





调用 Context.save() 方 法 可 以 保存 当前 的 绘图 状态 。Canvas 状态 是 以 堆 (stack) 的 方式 
保存 绘图 状态 的 ， 绘 图 状态 包括 : 

。 当前 应 用 的 操作 比如 移动 、 旋 转 、 缩 放 或 变形 ， 具 体 方法 将 在 本 节 稍 后 介绍 )。 

e strokeStyle、fillStyle、globalAlpha、lineWidth、lineCap、lineJoin、miterLimit、 
shadowOffsetX、\ shadowOffsetY、\ shadowBlur、 shadowColor、 globalCompositeOperation 
等 属性 的 值 。 

。 当前 的 裁 切 路 径 (clipping path)。 

调用 Contextrestoe() 方 法 可 以 从 堆 中 弹出 之 前 保存 的 绘图 状态 。 

Context.save() 方 法 和 Contextrestoe() 方 法 都 没有 参数 。 

【 例 5-12】 保存 和 恢复 绘图 状态 。 


<canvas id="myCanvas" height=500 width=500></canvas> 

<script type="text/javascript"> 

function draw() { 

Var ctx = document .getElementById('myCanvas') .getContext('2d') 
ctx.fillstyle = 'red' 

ctx.fillRect (0,0,150,150); // 使 用 红色 填充 矩形 

ctx.save(); // 保 存 当 前 的 绘图 状态 

ctx.fillstyle = 'green' 

ctx.fillRect (45, 45, 60, 60) ; // 使 用 绿色 填充 矩形 

ctx.restore(); // 恢复 之 前 保存 的 绘图 状态 ， 即 ctx.fillstyle = 'red' 
ctx.fillRect (60, 60,30,30); // 使 用 红色 填充 矩形 


window.addEventListener ("load", draw, true); 
</script> 


浏览 例 5-12 的 结果 如 图 5-11 所 示 。 





图 5-11 渐变 填充 文字 


“5.6.2 图 形 的 变换 


1. 平移 translate(x,y) 
参数 x 是 坐标 原点 向 x 轴 方 向 平移 的 位 移 ,参数 y 是 坐标 原点 向 y 轴 方 向 平移 的 位 移 。 
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2. 缩放 scale(x,y) 

参数 x 是 x 坐标 轴 缩 放 比例 ， 参 数 y 是 y 坐标 轴 缩 放 比 例 。 

3. 旋转 rotate(angle) 

参数 angle 是 坐标 轴 旋 转 的 角度 〈 和 角度 变化 模型 和 画 圆 的 模型 一 样 )。 
4. 变形 setTransform() 

可 以 调用 setTransform() 方 法 对 绘制 的 canvas 图 形 进行 变形 ， 语 法 如 下 : 


context .setTransform(mll, ml2, m21, m22, dx, dy); 


假定 点 (x, y) 经 过 变形 后 变 成 了 (X,Y)， 则 变形 的 转换 公式 如 下 : 
X=mllxx+m21xy+ dx 

Y=ml2xx+Im22xy+ dy 

【 例 S-13】 图 形 的 变换 例子 。 


<canvas id="myCanvas" height=250 width=250> 您 的 浏览 器 不 支持 canvas。</canvas> 
<script type="text/javascript"> 
function draw(){ 
var canvas=document .getElementById ("myCanvas"); // 获 取 网 页 中 的 canvas 对 象 
var context = canvas.getContext ("2d"); // 获 取 canvas 对 象 的 上 下 文 
context .save(); // 保 存 了 当前 context 的 状态 
context .fillSstyle = "#EEEEFF"; 
context .fillRect (0, 0, 400, 300); 
context .fillstyle = "rgba(255,0,0,0.1)"; 
context .fillRect (0，0，100，100);// 正 方形 
// 平 移 1 缩放 2 旋转 3 


context.translate (100, 100); // 坐 标 原 点 平移 (100，100) 
Context .scale (0.5, 0.5); //zx1,y 轴 是 原来 一 半 
context .rotate (Math.PI / 4); // 旋 转 45 度 
context.fillRect (0, 0, 100, 100); / /平移 缩放 旋转 后 的 正方 形 
context .restore(); // 恢 复 之 前 保存 的 绘图 状态 
context .beginPath (); // 开 始 绘图 路 径 


context .arc(200，50，50，0， 2 * Math.PI，false); // 绘 制 圆 
Context .stroke (); 
context .fill(); 

} 

window.addEventListener ("load", draw, true); 

</script> 


浏览 例 5-13 的 结果 如 图 5-12 所 示 。 


aw 


图 5-12 渐变 填充 文字 
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HTML5 Canvas 动画 实例 


在 开发 在 线 游戏 时 ， 绘 制 动 画 是 非常 重要 的 。 本 节 介绍 一 个 使 用 Canvas API 实现 的 动 
画 实例 一 一 游戏 人 物 的 跑步 动画 。 
?5.7.1 动画 的 概念 及 原理 


1. 动画 

动画 是 通过 一 幅 幅 静止 的 ， 内 容 不 同 的 画面 〈 即 帧 ) 快速 播放 使 人 们 在 视觉 上 产生 运 
动 的 感觉 。 这 是 利用 了 人 类 眼睛 的 视觉 暂 留 原理 。 利 用 人 的 这 种 生理 特性 可 制作 出 具有 高 
度 想 象 力 和 表现 力 的 动画 影片 。 

2. 原理 

人 们 在 看 画面 时 ， 画 面 会 在 大 脑 视觉 神经 中 停留 大 约 1/24 秒 ， 如 果 每 秒 更 替 24 个 画 
面 或 更 多 ， 那 么 前 一 个 画面 还 没 在 人 脑 中 消失 之 前 ， 下 一 个 画面 进入 人 脑 ， 人 们 就 会 觉得 
画面 动 起 来 了 ， 它 的 基本 原理 与 电影 、 电 视 一 样 ， 都 是 视觉 原理 。 

在 计算 机 上 要 实现 动画 效果 ， 除 了 绘图 外 ， 还 需要 解决 下 面 两 个 问题 : 

(1) 定期 绘图 ， 也 就 是 每 隔 一 段 时 间 就 调用 绘图 函数 进行 绘图 。 动 画 是 通过 多 次 绘图 
实现 的 ， 一 次 绘图 只 能 实现 静态 图 像 。 

可 以 使 用 setInterval0 方 法 设置 一 个 定时 器 ， 语 法 如 下 : 

setInterval (函数 名 ,时 间 间 隔 ) 


时 间 间 隔 的 单位 是 毫秒 (ms)， 每 经 过 指定 的 时 间 间 隔 系统 都 会 自动 调用 指定 的 函数 
完成 绘画 。 

(2) 清除 先前 绘制 的 所 有 图 形 。 物 体 已 经 移动 开 来 ， 可 原来 的 位 置 上 还 保留 先前 绘制 
的 图 形 ， 这 样 当然 不 行 。 解 决 这 个 问题 最 简单 的 方法 是 使 用 clearRect(x, y, width, height) 方 
法 清除 画布 中 指定 区 域 的 内 容 。 

5-13 是 一 个 方向 〈 一 般 都 是 4 个 方向 ) 的 跑步 动作 序列 图 。 假 如 想 获取 一 个 姿态 的 
位 图 ， 可 利用 Canvas 的 上 下 文 2D 对 象 的 drawImage(image, sourceX, sourceY, sourceWidth, 
sourceHeight,destX，destY，destWidth，destHeight) 将 源 位 图 上 某 个 区 域 (sourceX, sourceY, 
sourceWidth, sourceHeight) 拷贝 到 目标 区 域 的 (destX, destY) 坐标 点 处 ， 显 示 大 小 为 〈 宽 
destWidth， 高 destHeight)。 


和 作案 下 下 候 针 和 


图 5-13 一 个 方向 的 跑步 动作 序列 


【 例 $-14】 实现 从 跑步 动作 序列 Snap1.jpg 文件 中 截取 的 第 3 个 动作 〈 帧 )。 
分 析 : 在 Snapljpg 文件 中 ,每 个 人 物 动作 的 大 小 为 60 像素 X80 像素 ， 所 以 截取 源 位 
图 的 sourceX=120，sourceY=0，sourceWidth=60, sourceHeight=80 就 是 第 3 个 动作 ( 帧 )。 
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<canvas id="myCanvas" height=250 width=250> 您 的 浏览 器 不 支持 canvas。</canvas> 
<script type="text/javascript"> 
function draw() 
{ 

var canvas=document .getElementById ("myCanvas"); // 获 取 网 页 中 的 canvas 对 象 

Var context = canvas.getContext ("2d"); // 获 取 canvas 对 象 的 上 下 文 

var imageobj = new Image(); // 创 建 图 像 对 象 

imageObj.src = "Snapl.jpg"; 

imageObj .onload = function(){ 

// 从 原 图 (120，0) 位 置 开始 截取 中 间 一 块 宽 60* 高 80 的 区 域 ， 原 大 小 显示 在 屏幕 (0, 0) 处 
ctx.drawImage (imageOb], 120, 0, 6€0, 80, 0, 0, 60, 80); 
] 

} 
window.addEventListener ("load", draw, true); 
</script> 


浏览 例 5-14 的 结果 如 图 5-14 所 示 ， 在 页 面 上 仅仅 显示 第 3 个 动作 。 


5-14 静态 显示 第 3 个 动作 


?5.7.2 游戏 人 物 的 跑步 动画 


【 例 $-15】 实现 游戏 人 物 的 跑步 动画 。 
首先 定义 一 个 Canvas 元 素 ， 画 布 的 长 和 宽 都 是 300， 代 码 如 下 : 


<!DOCTYPE html> 

<html> 

<head> 

<title>HTML5 Canvas 实现 游戏 人 物 的 跑步 动画 </title> 

</head> 

<body> 

<canvas id="canvasId" width="300" height="300"></canvas> 
</body> 

</html> 


在 JavaScript 代码 中 定义 一 个 Image 对 象 ， 用 于 显示 Snap1.jpg。 然 后 定义 一 个 init() 
函数 ， 初 始 化 Inage 对 象 ， 并 设置 定时 器 ， 代 码 如 下 : 


<script type="text/javascript"> 





Var jimageobj = new Image(); 
War x =300» 


var n =0; // 计 数 器 
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function init(){ 
imageObj.src = 'Snapl.jpg'; 
imageobj .onload = function() { // 图 片 加 载 成 功 
setInterval (draw, 100); // 定 时 器 ， 每 0.1 秒 执行 一 次 draw () 函数 
De 
// 此 处 省 上 draw () 函数 的 代码 
window.addEventListener ("load", init, true); 
</script> 


使 用 了 定时 器 , 每 隔 100 毫秒 就 会 在 Snap1.jpg 图 片 截取 一 张 60 像素 X80 像素 大 小 的 
小 图 并 绘制 出 来 ， 且 每 次 向 左 移 15 像素 ,直到 最 左 端 时 重新 从 右 侧 开始 ,不 停 循环 ， 就 可 
见 游戏 人 物 在 屏幕 上 不 停 地 奔跑 。 

下 面 分 析 draw0 函 数 的 实现 。 例 5-14 中 仅仅 显示 人 物 的 第 三 个 动作 ， 而 为 了 实现 动画 
需要 clearRect(x, y, width, height) 不 断 清除 先前 绘制 的 动作 图 形 ， 再 绘制 后 续 的 动作 。 所 以 
需要 一 个 计数 器 n， 记 录 当 前 绘制 到 第 几 动 作 〈 帧 ) 了 。 

function draw() 














var canvas=document .getElementBYyId("myCanvas") ; // 获 取 网 页 中 的 canvas 


对 象 
Var ctx = canvas.getContext ("2d"); // 获 取 canvas 对 象 的 上 下 文 
ctx.clearRect (0,0,300,300); // 清 除 canvas 画布 


// 从 原 图 (60*n) 位 置 开 始 截取 中 间 一 块 宽 60* 高 80 的 区 域 ， 显 示 在 屏幕 (x, 0) 处 
ctx.drawImage (imageOb], 60*n, 0, 60, 80, x, 0, 60, 80); 
if (n>=8){ 
n=0; 
}else{ 
n++? 
} 
if (x>=0){ 
x=X-30; // 前 移 30 像素 
}else{ 
x=300; // 回 到 右 侧 
} 
} 


浏览 例 5-15 的 结果 是 一 个 游戏 人 物 不 停 重 复 地 从 右 侧 跑 到 左 侧 的 动画 。 
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CSS3 可 以 创建 动画 ， 它 可 以 取代 许多 网 页 动画 图 像 ， 如 Flash 动画 和 JavaScripts。 同 
样 jQuery 可 以 很 方便 地 在 HTML 元 素 上 实现 动画 效果 ， 例 如 显示 、 隐 藏 、 淡 入 淡出 和 滑 
动 等 。 这 无 疑 可 以 使 页 面 活泼 起 来 ， 实 现 很 多 吸引 眼球 的 特效 。 本 章 学 习 这 两 种 动画 。 


IE 到 csss 语法 基础 


CSS 即 Cascading StyleSheet ( 层 秋 样式 表 )。 在 网 页 制作 时 采用 层 秋 样式 表 技 术 , 可 以 
有 效 地 对 页 面 的 布局 、 字 体 、 颜 色 、 背 景 和 其 他 效果 实现 更 加 精确 地 控制 。CSS3 是 CSS 
技术 的 升级 版 本 ，CSS3 语言 开发 是 朝 着 模块 化 发 展 的 ， 更 多 新 的 模块 也 被 加 入 进来 。 这 
些 模块 包括 : 盒子 模型 、 列 表 模 块 、 超 链接 方式 、 语 言 模 块 、 背 景 和 边框 、 文 字 特 效 、 多 
栏 布局 等 。 

使 用 CSS 的 好 处 在 于 用 户 只 需要 一 次 性 定义 文字 的 显示 样式 , 就 可 以 在 各 个 网 页 中 统 

-使 用 了 ， 这 样 既 避免 了 用 户 的 重复 劳动 ， 也 可 以 使 系统 的 界面 风格 统一 。 

， 6.L1 CSS 基本 i 

CSS 层 县 样式 表 一 般 由 若干 条 样式 规则 组 成 ， 以 告诉 浏览 器 应 怎样 去 显示 一 个 文档 。 


而 每 条 样式 规则 都 可 以 看 作 是 一 条 CSS 的 基本 语句 
-条 CSS 的 基本 语句 的 结构 如 下 : 





例如 : 


divt{ 
width:100px; 
font-size:16pt; 
color:red 

} 


width 设置 宽度 ， 把 div 元 素 宽度 设置 为 100 像素 大 小 。font-size 设置 字体 大 小 ， 把 字 
体 设置 成 16 点 ;而 color 设置 文字 的 颜色 ， 颜 色 是 红色 。 
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基本 语句 都 包含 一 个 选择 器 (Selector), 用 于 指定 在 HTML 文档 中 哪 种 HTML 标记 元 
素 (例如 body、p 或 h3) 套用 花 括号 内 的 属性 设置 。 每 个 属性 带 一 个 值 ， 共 同 地 描述 这 个 
选择 器 应 该 如 何 显 示 在 浏览 器 中 。 
“6.1.2 在 HTML 文档 中 应 用 CSS 样式 


1. 内 部 样式 表 
在 网 页 中 可 以 使 用 style 元 素 定义 一 个 内 部 样式 表 ， 指 定 该 网 页 内 元 素 的 CSS 样式 。 
【 例 6-1】 使 用 内 部 样式 表 。 


<HTML> 
<HEAD> 
<STYLE type = "text/css"> 

A {color: red} 

P {background-color: yellow; color:white} 
</STYLE> 
</HEAD> 
<BODY> 
<A href="http://www.zut.edu.cn">CSS 示例 </A> 
<P> 你 注意 到 这 一 段 文 字 的 颜色 和 背景 颜色 了 吗 ?</P> 
</BODY></HTML> 


2. 样式 表 文 件 
-个 网 站 包含 很 多 网 页 ， 通 常 这 些 网 页 都 使 用 相同 的 样式 ， 如 果 在 每 个 网 页 中 重复 定 
义 样 式 表 ， 那 显然 是 很 麻烦 的 。 可 以 定义 一 个 样式 表 文 件 ， 样 式 表 文件 的 扩展 名 为 .css， 例 
如 style.css。 然 后 在 所 有 网 页 中 引用 样式 表 文 件 ， 应 用 其 中 定义 的 样式 表 。 
在 HIML 文档 中 可 以 使 用 link 元 素 引 用 外 部 样式 表 。 
【 例 6-2】 演示 外 部 样式 表 的 使 用 。 
创建 一 个 style.css 文件 ， 内 容 如 下 : 




















A {color: red} 
P {background-color: blue; color:white} 


引用 style.css 的 HTML 文档 的 代码 如 下 : 


<HTML> 

<HEAD> 

<link rel="stylesheet" type="text/css" href="style.css" /> 
</HEAD> 

<BODY> 

<A href=" http://www.zut.edu.cn ">CSS 示例 </A> 

<P> 你 注意 到 这 一 段 文字 的 颜色 和 背景 颜色 了 吗 ?</P> 

</BODY></HTML> 


MOI OSS EI 
在 CSS 中 选择 器 用 于 选择 需要 添加 样式 的 元 素 。 选择 器 主要 有 三 种 。 

















1. 标记 选择 器 

一 个 完整 的 HTML 页面 是 由 很 多 不 同 的 标记 元 素 组 成 的 ， 例 如 body、p 或 h3。 而 标 
记 选 择 器 ， 则 是 决定 哪些 标记 元 素 采 用 相应 的 CSS 样式 。 

比如 ， 在 style.css 文件 中 对 p 标记 样式 的 声明 如 下 : 


pt 

font-size:12px; 

background:#900; 

color:090; 

} 

则 页 面 中 所 有 Pp 标记 的 背景 都 是 #900 (红色 ), 文字 大 小 均 是 12px, 颜色 均 为 #090 ( 绿 
色 ), 这 在 后 期 维护 中 ， 如果 想 改 变 整个 网 站 中 pp 标记 背景 的 颜色 ， 只 需要 修改 background 
属性 就 可 以 了 。 

2. 类 别 选择 器 

在 定义 HTML 元 素 时 ， 可 以 使 用 class 属性 指定 元 素 的 类 别 。 在 CSS 中 可 以 使 用 .class 
选择 器 选择 指定 类 别 的 HIML 元 素 ， 方 法 如 下 : 


.类 名 


{ 
属性 : 值 ;… 属 性 : 值 ; 
} 


在 HIML 中 ， 标 记 元 素 可 以 定义 一 个 class 的 属性 。 如 下 : 


<div class="demoDiv"> 这 个 区 域 字体 颜色 为 红色 </div> 
<p class="demoDiv"> 这 个 段落 字体 颜色 为 红色 </p> 


CSS 的 类 选择 器 根据 类 名 来 选择 ， 前 面 以 “.” 来 标志 ， 如 : 
.demoDiv{ 


color:#FF0000; 

} 

最 后 ， 用 浏览 器 浏览 ， 发 现 所 有 class 为 demoDiv 的 元 素 都 应 用 了 这 个 样式 。 包 括 了 
页 面 中 的 div 元 素 和 op 元素。 

3. ID 选择 器 

使 用 ID 选择 器 可 以 根据 HIML 元 素 的 ID 选取 HIML 元 素 ， 所 谓 卫 ， 就 是 相当 于 
HTML 文档 中 的 元 素 的 “身份 证 ?， 以 保证 其 在 一 个 HTML 文档 中 具有 唯一 性 。 这 给 使 用 
JavaScript 等 脚本 编写 语言 的 应 用 带 来 了 方便 。 要 将 一 个 ID 包括 在 样式 定义 中 ， 需 要 “#” 
号 作为 ID 名 称 的 前 级 。 例 如 ， 将 id="highlight" 的 元 素 设置 背景 为 黄色 的 代码 如 下 : 






































# highlight {background-color:yellow;} 
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区 csss 动画 


CSS3 动画 效果 有 变形 (transform)、 过 渡 变 换 〈transition) 和 动画 (animation ) 。 











CSS3 变形 可 以 旋转 、 缩 放 、 扭 曲 〈 反 过 来 )、 移 动 和 拉 伸 元 素 。 语 法 形式 如 下 : 











transform: rotate | scale | skew | translate |matrix; 

其 中 ，rotate: 旋转 ，scale: 缩放 ，skew: 扭曲 ，translate: 移动 ，matrix: 矩阵 变形 。 
(1) rotate: 顺 时 针 旋 转 元 素 一 个 给 定 的 度数 。 负 值 是 允许 的 , 这 时 表示 元 素 是 逆 时 针 旋转 。 
【 例 6-3】 旋转 <div> 元 素 30 度 。 














<html> 

<head> 

<style> 

divt{ 
width:200px; height:100px; 
background-color:yellow; 
/* 旋转 div */ 
transform: rotate (30deg); 
-ms-transform:rotate(30deg); /* IE 9 */ 
—webkit-transform:rotate (30deg); /* Safari and Chrome */ 

hE 

</style> 

</head> 

<body> 

<div>Hello</div> 

</body></html> 


浏览 器 效果 如 图 6-1 所 示 。rotate 值 (30deg) 使 元 素 <div> 顺 时 针 旋 转 30°。 


图 6-1 旋转 <div> 元 素 30” 


(2) scale 使 元 素 按 比 例 增加 或 减少 ， 取 决 于 宽度 (X 轴 ) 和 高 度 (了 轴 ) 的 参数 。 
【 例 6-4】 按 比 例 缩放 div 元 素 。 

div 

{ 

-ms-transform:scale(2,3); /* IE 9 */ 


-Webkit-transform: scale(2,3); /* Safari */ 
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transform: scale(2,3); /* 标准 语法 */ 

} 

scale(2.3) 转 变 div 元 素 宽度 为 原来 大 小 的 2 倍 ， 高 度 为 原来 大 小 的 3 倍 。 

(3) skew: 扭曲 。 

语法 : transform:skew(<angle> [.<angle>]): 

它 包 含 两 个 参数 值 , 分 别 表 示 XX 轴 和 YY 轴 倾 斜 的 角度 ， 如 果 第 二 个 参数 为 空 ， 则 默认 
为 0， 参 数 为 负 表 示 向 相反 方向 倾斜 。 

skewX(<angle>) 表 示 只 在 X 轴 《水 平方 向 ) 倾斜 。 

skewY(<angle>) 表 示 只 在 立轴 (垂直 方向 ) 倾斜 。 

【 例 6-$】 将 div 元 素 在 和 X 轴 和 立轴 上 倾斜 20” 和 30”。 

















div 

transform: skew(30deg,20deg); 

-ms-transform: skew(30deg,20deg); /* IE 9 */ 
-Webkit-transform: skew(30deg,20deg); /* Safari and Chrome */ 
} 


以 上 skew(30deg,20deg) 则 将 div 元 素 在 X 轴 和 立轴 上 倾斜 20” 和 30"” 。 

(4) matrix: 将 2D 变换 方法 合并 成 一 个 。matrix 有 6 个 参数 ， 包 含 旋转 、 缩 放 、 移 动 
(平移 ) 和 倾斜 功能 。 

【 例 6-6】 利用 matrix() 方 法 旋转 div 元 素 30”。 


div 


{ 

transform:matrix(0.866,0.5,-0.5,0.866,0,0); 
-ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* IE 9 */ 
-webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0);/*Safari and Chrome */ 
} 









CSS3 过 渡 是 元 素 从 一 种 样式 逐渐 改变 为 另 一 种 样式 的 效果 ，transition 主要 包含 4 个 


属性 值 ， 如 表 6-1 所 示 。 


表 6-1 transition 的 主要 属性 





属性 描述 

transition 简写 属性 ， 用 于 在 一 个 属性 中 设置 4 个 过 渡 属 性 
transition-property 规定 应 用 过 渡 的 CSS 属性 的 名 称 
transition-duration 定义 过 渡 效果 花费 的 时 间 ， 默 认 是 0 
transition-timing-function 规定 过 渡 效果 的 时 间 曲 线 ， 默 认 是 “ease” 
transition-delay 规定 过 渡 效 果 何 时 开始 ， 默 认 是 0 


CSS3 过 渡 必 须 规定 两 项 内 容 : 指定 要 添加 效果 的 CSS 属性 和 效果 的 持续 时 间 。 
【 例 6-7】 应 用 于 宽度 属性 的 过 渡 效 果 ， 时 长 为 2 秒 。 








涉 
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div 
{ 
transition: width 2s; /* 应 用 于 宽度 属性 ， 效 果 过 程 2 秒 */ 
—webkit-transition: width 2s; /* Safari */ 
| 
注意 : 如 果 未 指定 期 限 ，transition 将 没有 任何 效果 ， 因 为 默认 值 是 0。 
一 个 典型 的 CSS 属性 的 变化 是 用 户 鼠 标 放 在 一 个 元 素 上 时 。 
【 例 6-8】 规定 当 鼠 标 指针 悬浮 于 <div> 元 素 上 时 宽度 会 发 生变 化 。 
div:hover /*hover 可 以 触发 执行 动画 过 渡 */ 
{ 





width:300px; 
} 


当 鼠 标 光标 移动 到 该 元 素 时 ， 它 逐渐 改变 它 原 有 的 宽度 。 
【 例 6-9】 在 一 个 例子 中 演示 使 用 所 有 过 渡 属 性 。 


<html> 

<head> 

<meta charset="utf-8"> 

<style> 

div 

{ 
width:100px; 
height:100px; 
background:red; 


transition-property:width; /* 应 用 于 宽度 属性 */ 
transition-duration:1s; /* 效 果 过 程 1 秒 */ 
transition-timing-function:1inear; /* 过 渡 效 果 的 时 间 曲 线 */ 
transition-delay:2s; /* 效 果 延 时 2 秒 */ 


/* Safari 苹果 计算 机 的 操作 系统 Mac 0S X 中 的 浏览 器 */ 
—webkit-transition-property:width; 
—webkit-transition-duration:1s; 
—webkit-transition-timing-function:linear; 
—webkit-transition-delay:2s; 


div:hover 
width:200px; 


</style> 

</head> 

<body> 

<div></div> 

<p> 鼠 标 移动 到 div 元 素 上 ， 查 看 过 渡 效 果 。</p> 


#6 吉 Cssohijouovam [IE 


<p><b> 注 意 : </b> 过 渡 效 果 需 要 等 待 两 秒 后 才 开始 。</p> 
</body></html> 


当然 div 样式 可 以 如 下 简写 : 
div 
{ 


transition: width 1s linear 2s; 
-webkit-transition:width 1s linear 2s;/* Safari */ 


| 

与 上 面 的 例子 有 相同 的 过 渡 效 果 ， 只 是 使 用 了 简写 的 transition 属性 。 
“6.2.3. 动画 ea 

动画 (Animation) 是 使 元 素 从 一 种 样式 逐渐 变化 到 另 一 种 样式 的 效果 。 可 用 百分比 来 
规定 变化 发 生 的 时 间 ， 或 用 关键 词 "fom" 和 "to"， 等 同 于 0% 和 100%。0% 是 动画 的 开始 ， 
100% 是 动画 的 完成 。 

【 例 6-10】 当 动 画 为 25% 及 50% 时 改变 背景 色 ， 然 后 当 动画 100% 完 成 时 再 次 改变 。 

<html> 

<head> 

<style> 

div 

{ 








width:100px; height:100px; 
background:red; 
animation:myfirst 5s; 
} 
Q@keyframes myfirst 
让 
0% {background:red;} 
25% {background:yellow;} 
50% {background:blue;} 
100% {background:red;} 
} 
</style> 
</head> 
<body> 
<div></div> 
<p><b> 注 释 : </b> 当 动画 完成 时 ， 会 变 回 初始 的 样式 。</p> 
</body></html> 


Animation 中 的 "@Kkeyframes" 叫 做 “关键 帧 ”， 用 过 Flash 的 读者 可 能 对 这 个 并 不 陌生 
我 们 要 控制 第 一 个 时 间 段 执行 什么 动作 ， 第 二 个 时 间 段 执行 什么 动作 〈 换 到 Flash 中 说 ， 
就 是 第 一 帧 我 要 执行 什么 动作 ,第 二 帧 我 要 执行 什么 动作 ), 此 时 我 们 也 需要 这 样 的 一 个 “ 关 
键 帧 ”来 控制 。 那 么 CSS3 的 Animation 就 是 由 “keyframes” 这 个 属性 来 实现 这 样 的 效果 。 














o 








是 这 个 “动画 
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@keyframes 具有 其 自己 的 语法 规则 ， 它 的 命名 是 














1"(@keyframes" 开 头 的 ， 后 面 紧 接 着 





的 名 称 ” 加 上 一 对 花 括 号 “全 ”， 括 号 中 就 是 一 些 不 同时 间 段 样式 规则 ， 有 点 





像 我 们 CSS 的 样式 写法 一 样 ,对 于 一 个 "@keyframes" 中 的 样式 规则 是 由 多 个 百分比 构成 的 ， 
如 “0%” 到 “100%” 之 间 ， 我 们 可 以 在 这 个 规则 中 创建 多 个 百分比 ， 分 别 给 每 一 个 百 分 


比 叶 





P 需 要 有 动画 效果 的 元 素 加 上 不 同 的 属性 ， 从 而 让 元 素 达 到 一 种 在 不 断 变化 的 效果 《〈 比 
如 说 移动 ， 改 变 元 素颜 色 、 位 置 、 大 小 、 形 状 等 )， 不 过 有 一 点 需要 注意 的 是 , 我们 可 以 使 
用 “from”“to” 来 代表 一 个 动画 是 从 哪 开 始 ， 到 哪 结束 ， 也 就 是 说 这 个 “from” 就 相当 于 
“0%”， 而 “to” 相 当 于 “100%”。 


【 例 6-11】 Animation 中 同时 改变 背景 色 和 位 置 。 


@keyframes myfirst 


0% {background: red; left:0px; top:0px;} 
25% {background: yellow; left:200px; top:0px;} 
50% {background: blue; left:200px; top:200px;} 
75% {background: green; left:0px; top:200px;} 
100% {background: red; left:0px; top:0px;} 


} 


-webkit-keyframes myfirst /* Safari 与 Chrome */ 


{ 


0% {background: red; left:0px; top:0px;} 
25% {background: yellow; left:200px; top:0px;} 
50% {background: blue; left:200px; top:200px;} 
75% {background: green; left:0px; top:200px;} 
100% {background: red; left:0px; top:0px;} 


} 
表 6-2 列 出 animation 的 主要 属性 。 


表 6-2 animation 的 主要 属性 


属性 描述 





animation 


animation-name 规定 @keyframes 动画 的 名 称 


animation-duration 


所 有 动画 属性 的 简写 属性 ， 除 了 animation-play-state 属性 


规定 动画 完成 一 个 周期 所 花费 的 秒 或 毫秒 ， 默 认 是 0 


animation-timing-function 规定 动画 的 速度 曲线 ， 默 认 是 “ease” 
animation-delay 规定 动画 何 时 开始 ， 默 认 是 0 


animation-iteration-count 


animation-direction 


animation-play-state 规定 动画 是 否 正在 运行 或 暂停 ， 


规定 动画 被 播放 的 次 数 ， 默 认 是 1 
规定 动画 是 否 在 下 一 周期 逆向 地 播放 ， 默 认 是 “normal” 


默认 是 “running” 


【 例 6-12】 myfirst 动画 中 演示 使 用 animation 所 有 的 属性 。 


<html> 
<head> 
<meta charset="utf-8"> 
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<style> 

div 

{ 
width:100px; 
height:100px; 
background:red; 
position:relative; 
animation-name:myfirst; 
animation-duration:5s; 
animation-timing-function:linear; 
animation-delay:2s; 
animation-iteration-count:infinite; 
animation-direction:alternate; 
animation-play-state:running; 
/* Safari and Chrome: */ 
—webkit-animation-name:myfirst; 
—webkit-animation-duration:5s; 
-webkit-animation-timing-function:linear; 
-webkit-animation-delay:2s; 
—webkit-animation-iteration-count:infinite; 
—webkit-animation-direction:alternate; 
—webkit-animation-play-state:running; 

} 

Q@keyframes myfirst 

{ 
0% {background:red; left:0px; top:0px;} 
25% {background:yellow; left:200px; top:0px;} 
50% {background:blue; left:200px; top:200px;} 
75% {background:green; left:0px; top:200px;} 
100% {background:red; left:0px; top:0px;} 

} 

Q@-webkit-keyframes myfirst /* Safari and Chrome */ 

{ 
0% {background:red; left:0px; top:0px;} 
25% {background:yellow; left:200px; top:0px;} 
50% {background:blue; left:200px; top:200px;} 
75% {background:green; left:0px; top:200px;} 
100% {background:red; left:0px; top:0px;} 

} 

</style> 

</head> 

<body> 

<qdiv> 大 家 好 </div> 

</body> 

</html> 
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运行 后 可 以 看 到 100X 100 的 正方 形 方块 在 沿 着 一 个 200X200 的 正方 形 的 四 边 循环 








移动 。 
当然 div 样式 可 以 如 下 简写 : 
div 


{ 


animation: myfirst 5s linear 2s infinite alternate; 
/* Safari 与 Chrome: */ 


-webkit-animation: myfirst 5s linear 2s infinite alternate; 
} 


效果 与 上 面 的 动画 相同 ， 但 是 使 用 了 简写 的 动画 animation 属性 。 
jQuery 基础 


jQuery 是 一 个 开源 的 、 轻 量 级 的 JavaScript 脚本 库 。 它 将 一 些 工具 方法 或 对 象 方法 封 
装 在 类 库 中 。 并 提供 了 强大 的 功能 函数 和 丰富 的 用 户 界 面 设计 能 力 。 近 来 jQuery 在 Web 
前 端 开 发 技术 中 已 经 广为人知 、 大 有 如 雷 贯 耳 之 势 。 本 节 介绍 jQuery 的 基础 知识 。 

jQuery 库 可 以 通过 一 行 简单 的 标记 被 添加 到 网 页 中 。 

引用 jQuery 官网 在 线 脚本 的 方法 如 下 : 


<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> 
<script> 


// jQuery 语句 





</script> 
当然 可 以 把 jqueryjs 下 载 到 本 地 ， 如 下 引用 本 地 的 jQuery 脚本 : 


<script src="jquery.js"></script> 
<script> 
// jQuery 语句 


</script> 
631 认识 jQuery 语法 
oe 语法 是 为 选取 HTML 元 素 而 编制 的 ， 可 以 对 元 素 执行 某 些 操作 ， jQuery 基本 


语法 是 : 





$ (selector) .action () 


美元 符号 $ 定 义 ]Query， 选 择 符 (selector) 选取 相应 HTML 元 素 ，action() 是 执行 对 元 


素 的 某 种 操作 。 
示例 
S(this).hide() 一 一 隐藏 当前 元 素 。 





$("p").hide( 一 一 隐藏 所 有 段落 。 
$(".test").hide() 一 一 隐藏 类 别 class="test" 的 所 有 元 素 。 
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S$("#test") hide() 一 一 隐藏 所 有 id="test" 的 元 素 。 
“6.3.2 元素 的 属性 与 CSS 样式 控制 

1. attr() 方 法 

使 用 attr0 方 法 可 以 访问 匹配 的 HTML 元 素 的 指定 属性 ， 语 法 如 下 : 

attr (属性 名 ) 

attr() 方 法 的 返回 值 就 是 HTML 元 素 的 属性 值 。 

假如 网 页 中 有 <img id="id img" src="01.jpg">， 则 $("#id_ img").attr("sre") 可 以 获取 
<img> 的 "src" 属 性 值 。 

attr() 方 法 的 主要 使 用 方法 如 表 6-3 所 示 。 

表 6-3 attr0 方 法 的 主要 使 用 方法 

















用 法 说 有 明 

attr(properties) 以 键 / 值 对 的 形式 设置 匹配 元 素 的 一 组 属性 。 例 如 ， 可 以 使 用 下 面 的 代码 设置 所 
有 img 元 素 的 src、title 和 alt 属性 。 
$("img").attr({ 


sre:"/images/hat.gif", 
title:"jQuery", 
alt:"jQueryLogo"}); 
attr(key,value) 以 键 / 值 对 的 形式 设置 匹配 元 素 的 指定 属性 。key 指定 属性 名 ，value 指定 属性 值 。 
例如 ， 可 以 使 用 下 面 的 代码 禁用 所 有 按钮 。 
$("button").attr("disabled","disabled"); 
attr(key,fn) 以 回调 函数 的 形式 设置 匹配 元 素 的 指定 属性 为 计算 值 。key 指定 属性 名 , 血 指定 
返回 属性 值 的 函数 。 例 如 : 
$("img").attr("sre",functionO{ 
return "/images/" + this.title; 
3 


2. 使 用 removeAttr() 方 法 删除 HTML 元 素 的 属性 

removeAttr() 方 法 的 语法 如 下 : 

removeAttr (属性 名 ) ; // 其 中 属性 名 是 要 移 除 的 属性 

IemoveAttr() 方 法 可 以 移 除 一 个 或 多 个 属性 。 如 需 移 除 若干 个 属性 ， 可 使 用 空格 分 隔 属 
性 名 。 

例如 下 面 代码 移 除 所 有 <p> 元 素 的 样式 属性 。 


<script> 








$ (document) .ready (function(){ 
$ ("button") .click (function(){ 
$("p") .removeAttr ("style"); 
]) 
]) 7 
</acript> 
<p style="font-size:120%;color:red"> 这 是 一 个 段落 。</p> 
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<p style="font-weight:bold;color:blue"> 这 是 另 一 个 段落 。</p> 
程序 运行 后 ， 段 落 文字 变 成 默认 字体 效果 。 

3. 使 用 text() 方 法 设置 HTML 元 素 的 文本 内 容 

text () 方 法 的 语法 如 下 : 

text (文本 内 容 ) 

【 例 6-13】 在 图 片上 单 击 后 在 div 中 显示 出 图 片 的 文件 名 。 


<!DOCTYPE html> 

<html> 

<head> 

<script src="jquery.js"></script> 





<script> 

$ (document) .ready (function(){ 
$("#id img") .click(function() { 

$("#div filename ").text($("#id img").attr("src")); 
]}) 7 
Ps 

</script> 

</head> 

<body> 

<img id="id img" src="01.jpg"> 

<div id="div filename">div filename</div> 

</body> 


上 例 程序 中 $(" 胃 d_img").attr("sre") 获 取 src 属性 值 后 , 通过 text 0 方法 设置 HTML 元 素 
<div> 的 内 容 。 所 以 当 我 们 单 击 图 片 时 ，<div> 中 显示 出 图 片 的 文件 名 “01.jpg”。 





在 jQuery 中 ， 可 以 通过 DOM 对 象 设置 HTML 元素 的 CSS 样式 。 
1. 使 用 css() 方 法 获取 和 设置 CSS 属性 





使 用 css0 方 法 获取 CSS 属性 的 语法 如 下 : 
值 = jQuery 对 象 .css( 属性 名 ); 

使 用 css0 方 法 设置 CSS 属性 的 语法 如 下 : 
jQuery 对象.css( 属性 名 ， 值 ) ; 








例如 : $("p").css("border","3px solid red"); 

2. 与 CSS 类别 有 关 的 方法 

(1) addClass() 

使 用 addClass() 方 法 可 以 为 匹配 的 HIML 元 素 添加 类 别 属性 ， 语 法 如 下 : 


jQuery 对 象 .addclass (className) 

















第 6 章 CSS3 和 jQuery 动画 Wp | 





className 是 要 添加 的 类 别名 称 。 
【 例 6-14】 向 第 一 个 <p> 元 素 添 加 一 个 类 别 “intro”。 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<script src="jquery.js"></script> 
<script> 
$ (document) .ready (function (){ 
$ ("button") .click (function(){ 
$("p:first") .addClass ("intro"); // 向 第 一 个 <p> 元 素 添加 一 个 类 别 intro 
1); 
1); 
</script> 
<style> 
.introf{ 
font-size:150%; 
color:red; 
} 
</style> 
</head> 
<body> 
<p> 这 是 一 个 段落 。</p> 
<p> 这 是 另 一 个 段落 。</p> 
<button> 添 加 类 名 </button> 
</body> 
</html> 


单 击 后 给 第 一 个 P 元 素 添加 一 个 CSS 类 名 .intro， 所 以 字体 放大 到 150%， 字 体 颜色 为 
红色 。 

(2) hasClass() 

使 用 hasClass0 〇 方法 可 以 判断 匹配 的 元 素 是 否 被 拥有 指定 的 类 别 ， 语 法 如 下 : 

jQuery 对 象 .hasclass( className ) 

如 果 匹 配 的 元 素 拥 有 名 为 className 的 类 别 ， 则 hasClass() 方 法 返回 Trme; 否则 返回 
False。 

(3) removeClass() 


使 用 removeClassO 可 以 为 匹配 的 HIML 元 素 删除 指定 的 class 属性 。 语 法 如 下 : 


jQuery 对 象 .removeClass( className ) 


className 是 要 删除 的 类 别名 称 。 
【 例 6-15】 演示 用 removeClass(0) 来 移 除 一 个 类 别 “intro”， 并 使 用 addClass0 添 加 一 个 
新 的 类 别名 “main”。 
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单 击 “ 修 改 第 二 个 P 元 素 的 类 名 ”按钮 后 ， 可 见 第 二 个 段落 的 字体 的 颜色 红色 消失 而 
出 现 背 景色 黄色 。 

(4) toggleClass() 

检查 匹配 的 HTML 元 素 中 指定 的 class 类 别 。 如 果 不 存 在 则 添加 class 类 别 ， 如 果 已 存 
在 则 将 其 删除 。 也 就 是 执行 切换 操作 ， 语 法 如 下 : 


className 是 要 切换 的 类 别名 称 。 
【 例 6-16】 toggleClass() 使 用 实例 。 
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注意 单 击 按钮 多 次 来 查看 切换 的 效果 。 
3， 获取 和 设置 HTML 元 素 的 尺寸 
(1) heightO 

获取 和 设置 元 素 的 高 度 信息 。 获 取 高 度 信息 的 语法 如 下 : 


设置 高 度 的 语法 如 下 : 


(2) width0 
获取 和 设置 元 素 的 宽度 。 获 取 宽 度 的 语法 如 下 : 


设置 宽度 的 语法 如 下 : 
jQuery 对 象 .widthwalu®); 
【 例 6-17】 通过 两 个 按钮 获取 HTML 段落 、 文 档 的 高 度 信息 。 
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<script> 
function showHeight (ele, h) { 
$("div") .text (ele + " 的 高 度 为 " + h + "px." ); 
} 
$("#getp") .click (function () { 
showHeight ("段落 "，$ ("p") .height ()); 
]) 7 
$("#getd") .click(function () { 
showHeight ("文档 "，$ (document) .height ()); 
DD); 
</script> 
</body> 
</html> 


运行 效果 如 图 6-2 所 示 。 


获取 段落 尺寸 | | 获取 文档 尺 二 
文档 的 高 度 为 594px. 


本 


图 6-2 获取 HTML 段落 、 文 档 的 高 度 信息 





4. 获取 和 设置 元 素 的 位 置 

(1) offset() 

获取 和 设置 元 素 在 当前 窗口 中 的 相对 偏 移 〈 坐 标 )。 获 取 坐 标的 语法 如 下 : 
value = jQuery 对象.offset () 7 

设置 坐标 的 语法 如 下 : 

jQuery 对 象 .offset (value); 

(2) position() 

获取 和 设置 元 素 相 对 父 元 素 的 偏 移 〈 坐 标 )。 获 取 坐 标的 语法 如 下 : 
value = jQuery 对 象 .position (); 

设置 坐标 的 语法 如 下 : 

jQuery 对 象 .position (value); 


jQuery 支持 的 事件 包括 键盘 事件 、 鼠 标 事件 、 表 单 事件 、 文 档 加 载 事 件 和 浏览 器 事件 
jQuery 可 以 很 方便 地 使 用 Event 对 象 对 触发 的 元 素 事件 进行 处 理 。 

1. 事件 处 理 函 数 

事件 处 理 函 数 指 触发 事件 时 调用 的 函数 ， 可 以 通过 下 面 的 方法 指定 事件 处 理 函数 : 





等 
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jQuery 选择 器 . 事件 名 (function() { 
< 函数 体 > 


} ) 7 


例如 ,前 面 多 次 使 用 $(document).ready() 方 法 指定 文档 对 象 的 ready 事件 处 理 函数 。ready 
事件 在 文档 对 象 就 绪 的 时 候 被 触发 。 

2. Event 对 象 

根据 W3C 标准 ，jQuery 的 事件 系统 支持 Event 对 象 ，Event 对 象 的 主要 属性 如 表 6-4 
所 示 。 





表 6-4 Event 对 象 的 属性 





属性 说 明 
currentTarget 触发 事件 的 当前 元 素 。 例 如 ， 下 面 的 代码 在 单 击 p 元 素 时 将 弹出 一 个 显示 true 的 对 
话 框 。 


$("p").click(function(event){ 
alert(event.currentTarget=—=this);//true 


D; 
data 传递 给 正在 运行 的 事件 处 理 函 数 的 可 选 数据 
delegateTarget 正在 运行 的 事件 处 理 函 数 绑 定 的 元 素 
namespace 触发 事件 时 指定 的 命名 空间 


pageX/pageY 鼠标 与 文档 边缘 的 距离 
relatedTarget 事件 涉及 的 其 他 DOM 元 素 (如 果 有 的 话 ) 





result 返回 事件 处 理 函 数 的 最 后 返回 值 
target 初始 化 事件 的 DOM 元 素 
timeStamp 浏览 器 创建 事件 的 时 间 与 1970 年 1 月 1 日 的 时 间 差 ， 单 位 为 ms 
type 事件 类 型 
which 用 于 键盘 事件 和 鼠标 事件 ， 表 示 按 下 的 键 或 鼠标 按钮 
【 例 6-18】 通过 鼠标 移动 事件 获取 鼠标 位 置 坐标 信息 。 
<html> 
<head> 
<style> 
div { color:red; } 
</style> 
<script type="text/javascript" src="jquery.js"></script> 
</head> 
<body> 


<div id="mouse"></div> 

<SaripE 

$ (document) .mousemove (function(event){ 

$ ("#mouse") .text ("鼠标 event.pageX: " + event.pageX + ", event.pageY: " 十 
event .pageY); 

肝 冯 

</script> 
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</body> 
</html> 


程序 在 document 对 象 的 mousemove 事件 的 处 理 函 数 中 显示 Event 对 象 的 pageX 和 





pageY 属性 值 。 当 移动 鼠标 时 ， 会 在 页 面 中 显示 鼠标 的 位 置信 息 ， 如 图 6-3 所 示 。 





鼠标 event. pageX: 329，event.pageY: 41 


图 6-3 在 页 面 中 显示 鼠标 的 位 置信 息 


3. 绑 定 事件 处 理 函 数 
还 可 以 使 用 bind() 方 法 为 每 一 个 匹配 元 素 的 特定 事件 〈 比 如 click) 绑 定 一 个 事件 处 理 


器 函数 。 事 件 处 理 函数 会 接收 到 一 个 事件 对 象 。 


bind0 方 法 的 语法 如 下 : 
bind (type, [data], fn) 


参数 说 明 如 下 。 

type: 事件 类 型 。 

data: 可 选 参数 ， 作 为 event.data 属性 值 传递 给 事件 对 象 的 额外 数据 对 象 。 
fh: 绑 定 到 指定 事件 的 事件 处 理 器 函数 。 

【 例 6-19】 通过 使 用 bind0 方 法 给 按钮 绑 定 事件 处 理 函 数 。 


<html> 
<head> 
<script type="text/javascript" src="/jquery/jquery.js"></script> 
<script type="text/javascript"> 
$ (document) .ready (function(){ 
$ ("button") .bind ("click", function(){ 
$s'("p") -hide (> 
Hs 
Bs 
</script> 
</head> 
<body> 
<p>This is a paragraph.</p> 
<button> 请 点 击 这 里 </button> 
</body> 
</html> 


当 单 击 按钮 后 ， 段 落 文字 “This is a paragraph.” 被 隐藏 起 来 。 
【 例 6-20】 通过 使 用 bind0 方 法 给 按钮 绑 定 事件 处 理 函数 并 附加 数据 。 


<html> 
<head> 





<script type="text/javascript" src="jquery.js"></script> 
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<script> 
function handler (event) { 
alert (event .data.sex); 
} 
$ (document) .ready (function(){ 
Sninopatn bind("olicr., (Sox: "Bw y, handlor)s 
Hs 
</script> 
</head> 
<body> 
<input id="name"></input > 
</body> 
</html> 


在 click 单 击 事件 中 ， 附 加 参数 名 为 sex， 参 数值 为 “ 男 ” 的 信息 。 单 击 后 输入 框 出 现 
如 图 6-4 所 示 的 界面 。 


j Javascript 提醒 a | 





四 








图 6-4 显示 附加 信息 


4. 键盘 事件 
jQuery 提供 的 键盘 事件 如 表 6-5 所 示 。 


表 6-5 jQuery 提供 的 键盘 事件 
方法 说 明 
focusin() 绑 定 到 focusin 事件 处 理 函数 的 方法 ，focusin 事件 当 光 标 进 入 HTML 元 素 时 触发 
focusout0 绑 定 到 focusout 事件 处 理 函 数 的 方法 ，focusout 事件 当 光 标 离 开 HIML 元 素 时 触发 
keydown() 绑 定 到 keydown 事件 处 理 函 数 的 方法 ，keydown 事件 当 按 下 按键 时 触发 
keypress() 绑 定 到 keypress 事件 处 理 函 数 的 方法 ，keypress 事件 当 按 下 并 放 开 按键 时 触发 
keyupO 绑 定 到 keyup 事件 处 理 函 数 的 方法 ，keyup 事件 当 放 开 按键 时 触发 


【 例 6-21】 键盘 事件 实例 。 


<html> 
<head> 





<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript"> 
$ (document) .ready (function(){ 
$ ("input") .keydown (function (){ 
$ ("input") .css ("background-color™", "#FFFFCC"); 
Ey 
$ ("input") .keyup (function(){ 
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$ ("input") .css ("background-color", "#D6D6FF"); 


DD); 
]) 7 


</script> 


</head> 


<body> 请 随意 键入 一 些 字符 : <input type="text" /></body> 


</html> 





当 在 输入 框 中 输入 内 容 ， 此 时 发 生 keydown 和 keyup 事件 时 ， 输 入 框 会 改变 颜色 。 
【 例 6-22】 获取 按键 的 ASCII 码 。 


<html> 
<head> 


<script type="text/javascript" src="jquery.js"></script> 


<script type="text/javascript"> 


$ (document) .ready (function(){ 


$ ("input") .keydown (function (event){ 
$ ("div") .html ("Key: " + event.which); 


hy 
]) 7 


</script> 


</head> 


<body> 请 随意 键入 一 些 字符 : <input type="text" /> 
<p> 当 您 在 上 面 的 框 中 键入 文本 时 ， 下 面 的 div 会 显示 键 位 序号 。</p> 


<div /> 


</body> 
</html> 


event.which 属性 指示 按 了 哪个 键 或 鼠标 按钮 。 当 在 输入 框 中 输入 字符 时 ， 下 面 的 div 
会 显示 对 应 的 ASCI 码 ， 效 果 如 图 6-5 所 示 。 


请 随意 键入 一 些 字符 ， 
当 您 在 上 面 的 框 中 键入 文本 时 ， 下 面 的 div 会 显示 键 位 序号 。 
Key: 89 


图 6-5 显示 按 了 哪个 键 


5. 鼠标 事件 
jQuery 提供 的 鼠标 事件 如 表 6-6 所 示 。 





表 6-6 jQuery 提供 的 鼠标 事件 








方法 说 明 

clickO 绑 定 到 click 事件 处 理 函 数 的 方法 ，click 事件 当 单 击 鼠 标 时 触发 
dblclickO) 绑 定 到 dblclick 事件 处 理 函 数 的 方法 ，dblclick 事件 当 双 击 鼠 标 时 触发 
hover0 指定 鼠标 指针 进入 和 离开 指定 元 素 时 的 处 理 函 数 


mousedown() 


绑 定 到 mousedown 事件 处 理 函 数 的 方法 ，mousedown 事件 当 按 下 鼠标 按键 时 触发 
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续 表 
方法 说 明 
mouseenter() 绑 定 到 鼠标 进入 元 素 的 事件 处 理 函 数 
mouseleave() 绑 定 到 鼠标 离开 元 素 的 事件 处 理 函 数 
mousemove() 绑 定 到 mousemove 事件 处 理 函 数 的 方法 ，mousemove 事件 当 移动 鼠标 时 触发 
mouseout() 绑 定 到 mouseonut 事件 处 理 函数 的 方法 , mouseout 事件 当 鼠 标 指针 离开 被 选 元 素 时 触 
发 。 不 论 鼠 标 指 针 离 开 被 选 元 素 还 是 任何 子 元 素 ， 都 会 触发 mouseout 事件 ， 而 只 有 
在 鼠标 指针 离开 被 选 元 素 时 ， 才 会 触发 mouseleave 事件 
mouseover() 绑 定 到 mouseover 事件 处 理 函 数 的 方法 ， 当 鼠标 指针 位 于 元 素 上 方 时 触发 此 事件 


【 例 6-23】 当 鼠 标 指针 进入 、 离 开元 素 时 ， 改 变 元 素 的 背景 色 。 


<html> 
<head> 








<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript"> 
$ (document) .ready (function (){ // 文 档 就 绪 ready 事件 
$ ("Pp") .mouseenter (function (){ // 鼠 标 指针 进入 元 素 p 的 事件 
$("p") .css("background-color", "yellow"); 
3 
$ ("p") .mouseleave (function() { // 鼠 标 指针 离开 元 素 p 的 事件 
$("p") .css ("background-color"，"#E9E9E4") 7 
]) 7 
1); 
</script> 
</head> 
<body> 
<p style="background-color:#E9E9E4"> 请 把 鼠标 指针 移动 到 这 个 段落 上 </p> 
</body> 
</html> 


当 鼠 标 指针 离开 <p> 元 素 时 ， 会 发 生 mouseleave 事件 。 该 事件 大 多 数 时 候 会 与 
mouseenter 事件 一 起 使 用 。 

6. 文档 加 载 事件 

jQuery 提供 的 文档 加 载 事 件 有 load、ready 和 unload 事件 。 

(1) load 事件 当 加 载 文档 时 触发 。 

(2) ready 是 文档 就 绪 事 件 ， 当 所 有 HTML 元 素 都 被 完全 加 载 时 执行 。 

所 有 jQuery 函数 位 于 一 个 document ready 函数 中 : 





$ (document) .ready (function(){ 
// 此 处 填写 页 面 加 载 完 成 后 要 执行 的 操作 
]) 


这 是 为 了 防止 文档 在 完全 加 载 就绪) 之 前 运行 jQuery 代码 ， 如 果 在 文档 没有 完全 加 
载 之 前 就 运行 函数 ， 操 作 可 能 失败 。 
与 以 上 写法 效果 相同 的 简洁 写法 如 下 : 
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$ (function(){ 
// 此 处 填写 页 面 加 载 完 成 后 要 执行 的 操作 
1); 


以 上 两 种 方式 都 可 以 实现 文档 就 绪 后 执行 jQuery 方法 。 

(3) unload 事件 当 离 开 一 个 页 面 或 印 载 一 个 页 面 时 触发 。 然 而 不 管 怎样 ， 此 事件 不 能 
够 阻止 页 面 的 离开 。 从 jQuery 1.8 起 被 废弃 ， 可 以 绑 定 beforeunload 事件 给 $(window) 对 象 
来 阻止 页 面 的 离开 、 印 载 或 导航 到 其 他 站 点 。 

【 例 6-24】 页 面 离开 时 弹出 警告 。 

<html> 

<head> 























<script type="text/javascript" src="http://code.jquery.com/jquery- 
1.9.1. min.js"></script> 
<script type="text/javascript"> 
$ (document) .ready (function(){ 
//jQuery 
$ (window) .bind('beforeunload', function() { 
Var message = "I'm really going to miss you if you go."; 
return message; 
}); 
1); 
</script> 
</head> 
<body> 
<p> 当 您 单 击 <ahref="http://w3school.com.cn"> 这 个 链接 /a> 时 ,会 触发 一 个 警告 框 。</p> 
</body> 
</html> 


用 户 单 击 链接 时 ， 会 弹出 “要 离开 此 网 站 吗 ? 系统 可 能 不 会 保存 你 的 更 改 ” 提 醒 对 话 
框 ， 并 能 选择 “离开 ”或 “ 留 下 ”。 


IE jQuery 动画 
jQuery 动画 包括 显示 和 隐藏 、 渐 入 渐 出 、 飞 入 飞 出 、 自 定义 动画 等 。 
?641 显示 和 隐藏 HIML 元 素 


HTML 元 素 
使 用 show( 方 法 可 以 动画 效果 显示 指定 的 HTML 元 素 ， 语 法 如 下 : 








1， 以 动画 效果 显 

















-Show( [duration ] [,easing ] [，complete ] ) 

参数 说 明 如 下 。 

duration: 指定 动画 效果 运行 的 时 间 长 度 ， 单 位 为 ms， 默 认 值 为 nomal (400ms)。 可 
选 值 包括 “slow” 和 “fast”。 在 指定 的 速度 下 ， 元 素 在 从 隐藏 到 完全 可 见 的 过 程 中 ， 会 逐 
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渐 地 改变 其 高 度 、 宽 度 、 外 边 距 、 内 边 距 和 透明 度 等 。 
easing: 指定 设置 不 同 动画 点 中 动画 速度 的 easing 函数 〈 也 称 为 动画 缓冲 函数 或 缓 动 
函数 )， 内 置 的 easing 函数 包括 swing (摇摆 缓冲 ) 和 linear (线性 缓冲 )。jQuery 的 扩展 插 
件 中 可 以 提供 更 多 的 easing 函数 。 

complete: 指定 动画 效果 执行 完 后 调用 的 函数 。 

show() 方 法 仅 适 用 于 通过 jQuery 隐藏 的 元 素 或 在 CSS 中 声明 style="display: none" 的 元 
素 。 不 适用 于 style="visibility:hidden" 的 元 素 。 

【 例 6-25】 使 用 show0 方 法 以 动画 形式 显示 HTML 元 素 的 实例 。 

<html> 

<head> 




















<script src="jquery.js"></script> 
</head> 
<body> 
<button> 显 示 图 片 </button> 
<img src="01.jpg" style="display: none"> 
<script> 
st"button") .crick(function (DY 
$ ("img") .show ("slow"); 
]) 7 
</script> 
</body> 
</html> 


在 页 面 中 单 击 “ 显 示 图 片 ”按钮 ， 则 “01.jpg” 图 片 会 以 动画 形式 显示 出 来 ， 效 果 如 
图 6-6 所 示 。 
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图 6-6 动画 形式 显示 HIML 元 素 <img> 
2. 隐藏 HTML 元 素 
使 用 hide0 方 法 可 以 隐藏 指定 的 HTML 元 素 ， 语 法 如 下 : 
-hide( [duration ] [, easing ] [, complete ] ) 


参数 的 含义 与 show0 方 法 中 完全 相同 ， 可 参照 理解 。 
【 例 6-26】 使 用 hide0 方 法 隐藏 指定 的 HIML 元 素 的 实例 。 
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<html> 

<head> 

<script src="jquery.js"></script> 
</head> 

<body> 

<button> 隐 藏 图 片 </button> 

<img src="01.jpg" > 

<script> 

$ ("button") .click(function () { 
$ ("img") .hide ("slow"); 

]) 7 

</script> 

</body> 

</html> 


3. 切换 HTML 元 素 的 显示 和 隐藏 状态 

使 用 toggle() 方 法 可 以 切换 HTML 元 素 的 显示 和 隐藏 状态 ， 语 法 如 下 : 

-toggle( [duration ] [, easing ] [, complete ] ) 

参数 的 含义 与 show() 方 法 中 完全 相同 , 可 参照 理解 ,在 例 6-26 中 将 hide 替换 为 toggle， 
即 可 体验 toggle0 方 法 的 效果 。 
6.4.2 淡 入 淡出 效果 

在 显示 幻灯 片 时 ， 经 常 使 用 淡 入 淡出 效果 。 淡 入 淡出 效果 实际 上 就 是 透明 度 的 变化 ， 
淡 入 就 是 由 透明 到 不 透明 的 过 程 ， 淡 入 就 是 由 不 透明 到 透明 的 过 程 。 

1. 实现 淡 入 效果 

使 用 fadeIn(0) 方 法 可 以 实现 淡 入 效果 ， 语 法 如 下 : 








fadeIn( [duration ] [, easing ] [, complete ] ) 


参数 的 含义 与 show() 方 法 中 完全 相同 ， 可 参照 6.4.1 节理 解 。 
【 例 6-27】 使 用 fadeIn0 方 法 实现 淡 入 效果 。 


<html> 
<head> 
<style> 
div { margin:3px; width:80px; display:none; 
height:80px; float:left; } 
div#one { background:#f£00; } 
div#two { background:#0f0; } 
div#three { background:#00f; } 
</style> 
<script type="text/javascript" src="jquery.js"></script> 
</head> 
<body> 
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<div id="one"></div> 

<div id="two"></div> 

<div id="three"></div><br> 

<button> 单 击 我 . . .-</button> 

<script> 

$ ("button") .click(function () { 
$ ("div:hidden:first") .fadeIn ("slow"); 

]) 

</script> 

</body> 

</html> 


页 面 中 定义 了 三 个 初始 为 隐藏 的 div 元 素 和 一 个 按钮 。 单 击 按钮 ， 会 以 淡 入 效果 显示 


第 一 个 隐藏 的 div 元 素 (由 选择 器 8$("div:hidden:first) 得 到 )。 三 个 div 元 素 都 显示 出 来 的 效 
果 如 图 6-7 所 示 。 
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图 6-7 淡 入 效果 显示 div 元素 

2. 实现 淡出 效果 

使 用 fadeOut 0 方法 可 以 实现 淡出 效果 ， 语 法 如 下 : 

fadeout ( [duration ] [, easing ] [, complete ] ) 
参数 的 含义 与 show0 方 法 中 完全 相同 。 

fadeOut (方法 可 以 规定 动画 效果 的 持续 时 间 。 例 如 : 

$ ("div") .fadeout (5000) 
以 上 代码 规定 div 的 淡出 效果 可 在 5000 毫秒 5 秒 ) 内 完成 。 
fadeOut 0 方法 也 可 以 在 动画 完成 后 调用 函数 。 例 如 : 

$ ("div") .fadeout (5000, function () {alert (' 动 画 效果 完成 ! ') }) 
以 上 代码 能 够 在 动画 完成 以 后 触发 回调 函数 ， 于 是 弹出 一 个 提示 框 。 
【 例 6-28】 使 用 fadeOut 0 方法 实现 淡出 效果 。 


<html> 














涉 





EN HTML5 网 页 游戏 设计 从 基础 到 开 


<head> 
<style type="text/css"> 
divf{ 
background:#060; 
width:300px; 
height:300px; 
color:red 
} 
</style> 
<script type="text/javascript" src="jQuery.js"></script> 
<script> 
$ (document) .ready (function (){ 
$("#up") .click (function(){ 
$ ("div") .fadeout (5000, function() {alert (' 动 画 效果 完成 ! ') }); 
}) 
3} 
</script> 
</head> 
<body> 
<div></div> 
<button id="up"> 单 击 查 看 效果 </button> 
</body> 
</html> 


3. 直接 调节 HTML 元 素 的 透明度 
使 用 fadeTo() 方 法 可 以 直接 调节 HTML 元 素 的 透明 度 ， 语 法 如 下 : 


fadeTo( duration, opacity [, easing ] [, complete ] ) 


参数 opacity 表示 透明 度 , 取 值 范围 为 0~1。 其 他 参数 的 含义 与 show0 方 法 中 完全 相同 。 
【 例 6-29】 使 用 fadeTo0 方 法 调节 HIML 元 素 的 透明 度 的 实例 。 


<html> 

<head> 

<script type="text/javascript" src="jquery.js"></script></head> 
<body> 

<p> 单 击 我 ， 我 会 变 透 明 。</p> 

<p> 用 于 比较 。</p> 

<script> 

Stsfirst click(toanction (FN 
$ (this) .fadeTo("slow", 0.4); 

和 

< 二 CE > 

</body> 

</html> 


页 面 中 定义 两 个 p 元 素 。 单 击 第 一 个 p 元素, 它 的 淡出 效果 变 得 透明 (透明 度 为 0.4)。 
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第 二 个 p 元 素 仅 用 于 比较 ， 效 果 如 图 6-8 所 示 。 
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图 6-8 p 元素 变 得 透明 


4. 以 淡 入 淡出 的 效果 切换 显示 和 隐藏 HTML 元 素 

使 用 fadeToggle( 方 法 可 以 淡 入 淡出 的 效果 切换 显示 和 隐藏 HTML 元 素 ， 也 就 是 说 ， 
如 果 HIML 元 素 原 来 是 隐藏 的 ， 则 调用 fadeToggle0 方 法 后 会 逐渐 变 成 显示 ; 如 果 HIML 
元 素 原来 是 显示 的 ， 则 调用 fadeToggle0 方 法 后 会 逐渐 变 成 隐藏 ，fadeToggle0 方 法 的 语法 
如 下 : 


fadeToggle( duration, opacity [, easing ] [, complete ] ) 


参数 的 含义 与 show0 方 法 中 完全 相同 。 
【 例 6-30】 使 用 fadeToggle() 方 法 以 淡 入 淡出 效果 切换 显示 和 隐藏 HTML 元 素 的 实例 。 


<html> 
<head> 
<script type="text/javascript" src="jquery.js"></script> 
</head> 
<body> 
<button> 线 性 切换 </button> 
<button> 快 速 切换 </button> 
<p> 我 是 pl .我 会 以 慢 速 、 线 性 的 方式 切换 显示 和 隐藏 。</p> 
<p> 我 是 p2 .我 会 快速 地 切换 显示 和 隐藏 。</p> 
<script> 
S(t"button:first"} .click(function() { 
$("p:first") .fadeToggle ("slow", "linear"); 
Ss 
$ ("button:last") .click(function () { 
$("p:last") .fadeToggle ("fast"); 
]) 7 
</script> 
</body> 
</html> 


页 面 中 定义 了 两 个 p 元 素 和 两 个 按钮 。 单 击 “ 线 性 切换 ”按钮 ， 会 以 慢 速 、 线 性 的 方 
式 切换 显示 和 隐藏 第 一 个 p 元 素 。 单 击 “ 快 速 切换 ”按钮 ， 会 以 快速 的 方式 切换 显示 和 隐 
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藏 第 二 个 p 元 素 ， 效 果 如 图 6-9 所 示 。 














€ 和 H\2017 书 黎 \ 第 10 本 Html5 游 戏 动画 设 吴 | 
您 H\2017 书 稿 \ 第 10 本 Htm.. x 
文件 昌 ” 编 加 ( 昌 ”查看 (V) ”收藏 夫 (A) 工具 中 帮助 (HH) 


线性 切换 ] | 快速 切换 
我 是 p1. 我 会 以 慢 速 、 线 性 的 方式 切换 显示 和 隐藏 
我 是 p2. 我 会 快速 地 切换 显示 和 隐藏 。 












































瑟 100% ~ 
图 6-9 切换 效果 


?6.4.3 滑动 效果 





1. 以 滑动 效果 显示 隐藏 的 HTML 元 素 
使 用 SlideDown 0 方法 可 以 滑动 效果 显示 隐藏 的 HTML 元 素 ， 语 法 如 下 : 


SlideDown ( [duration ] [, easing ] [, complete ] ) 


参数 的 含义 与 show() 方 法 中 完全 相同 ， 可 参照 6.4.1 节理 解 。 
【 例 6-31】 使 用 SlideDown 0 方法 以 滑动 效果 显示 HTML 元 素 的 实例 。 


<html> 
<head> 
<style> 
div { background:#de9a44; margin:3px; width:80px; 
height:40px; display:none; float:left; } 
</style> 
<script type="text/javascript" src="jquery.js"></script> 
</head> 
<body> 
单 击 我 ! 
<div></div> 
<div></div> 
<div></div> 
<script> 
$ (document .body) .click(function () { 
3E (S("aiv: First") .Lis(l" :hidden")y t 
$ ("div") .slideDown ("slow"); 
} else { 
$ ("div") .hide(); 
} 
DD); 
</acript> 
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</body> 
</html> 


页 面 中 定义 了 三 个 初始 为 隐藏 的 div 元 素 。 单 击 “ 单 击 我 ”时 ， 如 果 第 一 个 div 元 素 
是 隐藏 的 ($(div:first).is(:hidden))， 则 调用 $(div).slideDown("slow") 方 法 以 滑动 效果 显示 div 
元 素 ; 否则 隐藏 div 元 素 。 三 个 div 元 素 都 显示 出 来 之 后 效果 如 图 6-10 所 示 。 











/ 
(cs 全 | DA 第 6 章 CSS 和 Jquery 动 画 \ 例 6-31html 记忆 | 总 DA 入 6 意 Css 和 jquery 动 .、 x 人 天文 量 计 | 


文件 ( 唱 ” 编 铝 (E) 查看 (V) 收藏 夫 (A) 工具 中 帮助 (H) 


| | 




















图 6-10 滑动 效果 显示 div 元 素 


2. 以 滑动 效果 隐藏 HTML 元 素 
使 用 SlideUp( 方 法 可 以 滑动 效果 隐藏 HIML 元 素 ， 语 法 如 下 : 


SlideUp ( [duration ] [，easing ] [，complete ] ) 


参数 的 含义 与 show() 方 法 中 完全 相同 。 
3， 以 滑动 效果 切换 显示 和 隐藏 HTML 元 素 
使 用 SlideToggle() 方 法 可 以 滑动 效果 切换 显示 和 隐藏 HIML 元 素 ， 语 法 如 下 : 


SlideToggle( [duration ] [，easing ] [，complete ] ) 


参数 的 含义 与 show() 方 法 中 完全 相同 。 
【 例 6-32】 使 用 SlideDown 0 方法 以 滑动 效果 切换 显示 和 隐藏 HTML 元 素 实 例 。 


<html> 
<head> 
<style> 
p { width:450px; } 
</style> 
<script type="text/javascript" src="jquery.js"></script> 
</head> 
<body> 
<button> 切 换 </button> 
<p> 
使 用 SlideToggle () 方法 可 以 滑动 效果 切换 显示 和 隐藏 HTML 元 素 。 
</p> 
<script> 

$ ("button") .click (function () { 

$("p") .slideToggle ("slow"); 
a. 
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</script> 
</body> 
</html> 








[= | 5 le 
AP 
(SI ps ceaveryaame 32hml p- |B oe oma, Sovscs css.. » Bet 
文件 昌 ”篇 编 (E) 查看 (VW) 收藏 夫 ( 和 ”工具 中 各 助 呈 ) 
切 接 


使 用 SlideToggle (方法 可 以 滑动 效果 切换 显示 和 隐藏 HDML 元 素 。 






































图 6-11 滑动 效果 切换 显示 和 隐藏 HTML 元 素 





.4.4 ”执行 自 定义 的 动画 
调用 animate0 方 法 可 以 根据 一 组 CSS 属性 实现 自 定义 的 动画 部 
$ (selector) .animate( properties [, duration ] [, easing ] [, complete ] ) 


参数 说 明 如 下 。 
properties : 产生 动画 效果 的 CSS 属性 和 值 ， 可 以 使 用 的 CSS 属性 包括 
backgroundPosition、 borderWidth、 borderBottomWidth、 borderLeftWidth、 borderRightWidth、 
borderIopWidth、borderSpacing margin、 marginBottom、 marginLeft, marginRight、 marginTop、 
outlineWidth、padding、paddingBottom、paddingLeft、paddingRight、paddingTop、height、 
width、 maxHeight、 maxWidth、minHeight、 maxWidth、font、 fontSize、bottom、left、 right、 
top、letterSpacing、wordSpacing、lineHeight、textIndent 等 。 
duration: 指定 动画 效果 运行 的 时 间 长 度 ， 单 位 为 ms， 默 认 值 为 nomal (400ms)。 可 
选 值 包括 "slow" 和 "fast"。 
easing: 指定 设置 不 同 动 画 点 中 动画 速度 的 easing 函数 〈 也 称 为 动画 缓冲 函数 或 缓 动 
函数 )， 内 置 的 擦 除 函 数 包括 swing (摇摆 缓 冲 ) 和 linear (线性 缓冲 )。jQuery 的 扩展 插件 
中 可 以 提供 更 多 的 easing 函数 。 
complete: 指定 动画 效果 执行 完 后 调用 的 函数 。 
【 例 6-33】 animate() 方 法 实现 自 定义 动画 的 实例 。 
<html> 
<head> 
<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript"> 
$ (document) .ready (function () 
{ 
$("#btnl") .click (function(){ 
$ ("#box") .animate ({height:"300px"}); 
]) 
$("#btn2") .click (function(){ 
$ ("#box") .animate ({height:"100px"}); 
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]) 7 

]) 7 

</script> 

</head> 

<body> 

<div id="box" style="background:#0000ff;height:100px;width:100px;margin: 
6€px; "> 

</div> 

<button id="btn1"> 变 长 </button> 

<button id="btn2"> 恢 复 </button> 

</body> 

</html> 


页 面 中 定义 了 一 个 蓝 色 背景 的 div 元 素 ， 如 图 6-12 所 示 。 单 击 “ 变 长 ”按钮 ， div 元 
素 会 拉 长 。 单 击 “ 恢 复 ” 按 钮 ，div 元 素 又 会 恢复 成 原来 的 高 度 。 


[一 | 
(DO mae ssh p- ceosscsua > OS 


文件 昌 ”编辑 {E) ”查看 (V) 收藏 夹 (A) 工具 中 ”帮助 (H) 

















变 长 | | 恢复 



































图 6-12 自 定 义 动 画 的 实例 





jQuery 可 以 定义 一 组 动画 动作 ， 并 把 它们 放 在 队列 (queue) 中 顺序 执行 。 队 列 是 一 种 
支持 先进 先 出 原则 的 数据 结构 (线性 表 ), 它 只 允许 在 表 的 前 端 进行 删除 操作 ， 在 表 的 后 端 
进行 插入 操作 ， 图 6-13 所 示 是 队列 的 示意 图 。 





_ 入 队 


出 队 一 | a aa | 


j 




















图 6-13 ”队列 的 示意 图 
1. queue() 方 法 
使 用 queue 0 方法 可 以 管理 指定 动画 队列 中 要 执行 的 函数 ， 语 法 如 下 : 
queue( [queueName ] ) 


参数 queueName 是 队列 的 名 称 。 队 列 是 一 个 或 多 个 等 待 运行 的 函数 。 一 个 元 素 可 以 有 
若干 队列 ， 大 部 分 通常 具有 一 个 "你 " 队列 ， 即 默认 的 jQuery 队列 。 
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【 例 6-34】 使 用 queue 0 方法 显示 动画 队列 长 度 的 实例 。 


<html> 
<head> 





<script type="text/javascript" src="jquery.js"></script> 
<script> 
function runIt() { 
var div = $ ("div"); 
div.animate ({height:300},"slow"); 
div.animate ({width:300},"slow"); 
div.animate ({height:100},"slow"); 
div.animate ({width:100},"slow"); 
} 
$ (document) .ready (function(){ 
$ ("button") .click (function(){ 
runIit (); 
$ ("span") .text ($ ("div") .queue ("fx") .length); 
1); 
]) 7 
</script> 
</head> 
<body> 
<button> 开 始 演示 动画 </button> 
<p> 队 列 长 度 为 : <span></span></p> 
<div style="width:50px;height:50px;position:absolute;background-color: 
red;"></div> 
</body> 
</html> 


runItO 函 数 中 定义 了 一 组 动画 动作 ， 在 showlt0 函 数 中 调用 queue0 方 法 显示 默认 的 动 
画 队列 你 的 长 度 ， 效 果 如 图 6-14 所 示 。 
I se eae rl PD- OG cm "Md 


文科 中 ”如 注 日、 二 看 WV) 收 训 夫 A) 工具。 二 [| 
开始 汪 趟 六 国 
































图 6-14 ”queue0 方 法 的 实例 








可 以 使 用 下 面 的 方法 初始 化 动画 队列 : 








queue( [queueName ], newQueue ) 


参数 queueName 指定 动画 队列 的 名 称 ， 参 数 newQueue 是 指定 动画 队列 内 容 的 函数 数 


组 。 具 体 使 用 方法 将 在 dequeue() 方 法 例 6-35 中 介绍 。 
2. dequeue() 方 法 
使 用 dequeue() 方 法 可 以 执行 匹配 元 素 的 动画 队列 中 的 下 一 个 函数 ， 同 时 将 其 出 队 ， 语 
法 如 下 : 
































dequeue( [queueName ] ) 


参数 queueName 是 队列 的 名 称 。 
【 例 6-35】 使 用 queue 0 方法 执行 动画 队列 的 实例 。 


<html> 
<head> 
<style> 
#count { margin:3px; width:40px; height:40px; 
position:absolute; left:0px; top:60px; 





background:green; display:none; 
: 
</style> 
<script src="jquery.js"></script> 
<script type="text/javascript"> 
$ (function() { 
var div = $('#count'); 
var list = [ 
function() {div.show("slow"); div.dequeue('testList');}, 
function() {div.animate ({left:'+=200'},2000); div.dequeue 
('testList');}, 
function() {div.slideToggle(1000); div.dequeue('testList');}, 
function() {div.slideToggle ("fast");div.dequeue('testList');}, 
function() {div.div.hide("slow"); div.dequeue('testList');}, 
function() {div.show(1200); div.dequeue('testList');}, 
function() {div.slideUp("normal"); div.dequeue('testList');} ]; 
div.queue('testList', list); 
sO btn .bind(click, function() { 
div.dequeue('testList'); 
1); 
1); 
</script> 
</head> 
<body> 
<div id="count"></div> 
<input id="btn" type="button" value=" 开 始 " /> 
</body> 
</html> 

















程序 中 使 用 queue() 方 法 定义 了 一 个 动画 队列 testList， 动 画 队列 由 函数 数组 list 组 成 。 
每 个 动画 函数 后 ， 调 用 divdequeue(testList) 方 法 从 而 执行 动画 队列 中 下 一 个 动画 函数 〈 同 
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时 将 此 动画 函数 出 队 )。 因 此 ， 动 画 队列 中 包含 的 动画 会 依次 被 执行 。 





3. 删除 动画 队列 中 的 成 员 
使 用 ClearQueue0 方 法 可 以 删除 匹配 元 素 的 动画 队列 中 所 有 未 执行 的 函数 , 语法 如 下 : 


ClearQueue( [queueName ] ) 


参数 queueName 是 队列 的 名 称 。 
在 例 6-35 中 增加 一 个 “停止 ”按钮 ， 定 义 代码 如 下 : 


<button id="stop"> 停 止 </button> 
并 增加 如 下 jQuery 代码 定义 单 击 “ 停 止 ”按钮 的 操作 : 


$("#stop") .click (function () { 
Var myDiv = $ ("div"); 




















myDiv.clearQueue (); 
1D); 


单 击 “ 停 止 ” 按 钮 ， 会 在 执行 完 当前 动画 后 停止 ， 同 时 队列 长 度 变 成 0。 
4. 延迟 动画 
使 用 delay() 方 法 可 以 延迟 动画 队列 里 函数 的 执行 ， 语 法 如 下 : 


delay( duration [, queueName ] ) 


参数 duration 指定 延迟 的 时 间 ， 单 位 为 ms; 参数 queueName 是 队列 的 名 称 。 
【 例 6-36】 delay0 方 法 的 实例 。 


<html> 
<head> 
<style> 
div { position: absolute; width: 60px; height: 60px; float: left; } 
.first { background-color: #3f3; left: 0;} 
.Second { background-color: #33f; left: 80px;} 
</style> 
<script type="text/javascript" src="jquery.js"></script></head> 
<body> 
<p><button>Run</button></p> 
<div class="first"></div> 
<div class="second"></div> 
<script> 
$s("button") .click(function() { 
$ ("div.first") .slideUp(300) .delay (800) .fadeIn (400); 
$ ("div.second") .slideUp (300) .fadeIn (400); 
});</script> 
</body> 
</html> 


页 面 中 定义 了 两 个 div 元 素 。 单 击 Run 按钮 时 ，div 元 素 执 行 slideUp0 方 法 ， 然 后 执 
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行 fadeIn0 方 法 。 不 同 的 是 ， 第 一 个 div 元 素 执 行 完 slideUp() 方 法 后 ， 会 调用 Delay 0 方法 
延迟 800ms， 然 后 执行 fadeIn0 方 法 ， 效 果 如 图 6-15 所 示 。 


司 DA 第 6 宣 Css 和 jquery 动画 6-36html 记忆 个 DA 和 6E cssimjquery 动 . "Os 


文件 昌 ”编辑 {E) ”查看 (V) ”收藏 夫 (A) 工具 中 ”帮助 (H) 


Run 














































图 6-15 ”延迟 动画 的 实例 


5. 停止 正在 执行 的 动画 

(1) stop() 方 法 

使 用 stop 0 方法 可 以 停止 正在 执行 的 动画 ， 语 法 如 下 : 
stop( [queue ] [, clearQueue ] [, jumpToEnd ] ) 


参数 说 明 如 下 : 

queueName 指定 队列 的 名 称 ;，clearQueue 指定 是 否 删 除 队 列 中 的 动画 ， 默 认为 False， 
即 不 删除 ，jumpToEnd 指定 是 否 立 即 完成 当前 的 动画 ， 默 认为 False。 

(2) finish() 方 法 

使 用 finish 0 方法 可 以 停止 正在 执行 的 动画 并 删除 队列 里 所 有 的 动画 ， 语 法 如 下 : 


finish( [queue ] ) 


参数 queueName 是 队列 的 名 称 。 

finish (方法 相当 于 ClearQueue() 方 法 加 上 stop 0 方法 的 效果 。 

(3) jQuery.fx.o 企 属性 

将 jQuery.f.o 企 属性 设置 为 True 可 以 全 局 性 地 关闭 所 有 动画 (所 有 效果 会 立即 执行 完 
毕 )， 将 其 设 成 False 之 后 ， 可 以 重新 开启 所 有 动画 。 

在 下 面 的 情况 下 ， 可 能 需要 使 用 jQuery.fx.o 企 属性 关闭 所 有 动画 : 

GO 在 配置 比较 低 的 电脑 上 使 用 jQuery; 

@ 由 于 动画 效果 而 使 网 页 不 可 访问 。 

(4) jQuery fx.interval 属性 

使 用 jQuery. 人 x.interval 属性 可 以 设置 动画 的 显示 帧 速 ， 单 位 为 每 帧 100ms。 
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HTMLS 人 物 拼 图 游戏 
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人 物 拼 图 游戏 介绍 


拼图 游戏 将 一 幅 图 片 分 割 成 若干 拼 块 并 将 它们 随机 打 乱 顺序 。 当 将 所 有 拼 块 都 放 回 原 
位 置 时 ， 就 完成 了 拼图 游戏 结束 )。 

在 “游戏 ”中 ， 单 击 滑 块 选择 游戏 难 易 ,“ 容 易 ”为 3 行 3 列 拼图 游戏 ， 中 间 为 一 个 4 
行 4 列 拼图 游戏 ,“ 难 ”为 5 行 5 列 拼图 游戏 。 拼 块 以 随机 顺序 排列 , 玩家 用 鼠标 单 击 空白 
块 的 四 周 来 交换 它们 的 位 置 ， 直 到 所 有 拼 块 都 回 到 原 位 置 。 

拼图 游戏 运行 结果 如 图 7-1 所 示 。 


拼图 游戏 





图 7-1 拼图 游戏 运行 界面 


程序 设计 的 思路 


HTML5 可 以 把 图 片 整 合 到 网 页 中 。 使 用 canvas 元 素 可 以 在 这 个 空白 的 画布 上 填充 线 
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条 ， 载 入 图 片 文件 ， 甚 至 动画 效果 。 这 里 制作 拼图 游戏 用 来 展示 HIML5 canvas 的 图 片 处 
理 能 力 。 

游戏 程序 首先 显示 以 正确 顺序 排列 的 图 片 缩 略 图 ， 根 据 玩 家 设置 的 分 割 数 ， 将 图 片 分 
割 成 相应 tleCount 行列 数 的 拼 块 ， 并 按 顺序 编号 。 动 态 生 成 一 个 大 小 tileCountX tileCount 
的 数组 boardParts， 存 放 用 0、1、2 到 tileCountXtileCount-1 的 数 ， 每 个 数字 代表 一 个 拼 块 
(例如 4X4 的 游戏 拼 块 编号 如 图 7-2 所 示 )。 

游戏 开始 时 ， 随 机 打 乱 这 个 数组 boardParts， 假 如 boardParts[0] 是 5， 则 在 左上 角 显 示 
编号 是 5 的 拼 块 。 根 据 玩家 用 鼠标 单 击 的 拼 块 和 空白 块 所 在 位 置 ， 来 交换 该 boardParts 数 
组 对 应 的 元 素 ， 最 后 依据 元 素 排列 顺序 来 判断 是 否 已 经 完成 游戏 。 





























[| ?10 
Ear 
图 7-2 拼 块 编号 示意 图 


程序 设计 的 步骤 
1. 游戏 页 面 


<!doctype html> 
<html> 
<head> 
<title> 拼 图 游戏 </title> 
<style> 
.picture { 
border: lpx solid black; 
} 
</style> 
</head> 
<body> 
<div id="title"> 
<h2> 拼 图 游戏 </h2> 
</div> 
<div id="slider"> 
<form> 
<label> 容 易 </label> 
<input type="range" id="scale" value="4" min="3" max="5" step="1"> 
<labe1> 难 </labe1> 
<img id="source" width="120px" height="120px" src="defa.jpg" > 
</form> 
<br> 
</div> 
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<div id="main" class="main"> 

<canvas id="puzzle" width="480px" height="480px"></canvas> 
</div> 

<script src="sliding.js"></script> 

</body> 

</html> 


在 网 页 中 使 用 canvas 标记 创建 画板 。 
<canvas width="480px" height="480px"></canvas> 


canvas 的 宽 和 高 使 用 像素 为 单位 。 如 果 这 两 个 属性 没有 被 指定 ， 它 们 的 默认 宽度 为 
300px， 高 度 为 150px。 

网 页 中 <div id="slider"> 包 括 了 另 一 个 HIMLS 标记 : range input， 这 个 标记 <input 
type="range"> 可 以 让 用 户 拖 放 滑 块 选择 一 个 数值 。 这 里 设置 滑 块 最 小 值 为 3， 最 大 值 为 5。 
滑 块 值 为 3 表明 拼图 游戏 是 3 行 3 列 的 ， 滑 块 值 为 4 表明 拼图 游戏 是 4 行 4 列 的 ， 滑 块 值 
为 5 表明 拼图 游戏 是 5 行 5 列 的。 

<img id="source" width="120px" height="120px" src="defa.jpg" > 显示 原 图 defa.jpg 的 缩 
小 图 供 玩 家 参照 移动 拼 块 。 

2. sliding.js 文件 

在 页 面 上 画图 需要 使 用 canvas 的 上 下 文 环境 ， 通 过 调用 getContext() 方 法 获取 上 下 文 
环境 。 


Var context = document .getElementById('puzzle') .getContext ('2d'); 


我 们 还 需要 一 个 和 canvas 相同 大 小 的 图 片 'defa.jpg'。 

















Var img = new Image(); 

img.src = 'defa.jpg'; 

img.addEventListener('load', drawTiles, false); //1oad 事件 侦 听 , 即 图 片 加 
载 完 成 事件 


加 入 这 个 :load 事件 是 确保 图 片 完 成 加 载 后 ， 再 把 图 片 放 入 canvas 中 。drawTilesO 函 数 
绘制 打 乱 的 图 块 。 


Var boardsize=document .getElementById('puzzle') .width;// 获 取 画 板 (画布 ) 的 宽度 
var tilecount = document.getElementById('scale') .value;// 获 取 滑 块 的 值 


boardSize 是 canvas 的 宽度 ,通过 range input 设置 拼图 的 数量 tileCount， 数据 范围 从 3 
到 5《〈 几 行 几 列 )。 

var tilesize = boardsize / tileCount; // 计 算出 拼 块 的 大 小 宽度 

最 后 定义 三 变量 ， 其 中 两 个 Object 对 象 变量 ，emptyLoc 保存 空白 拼图 的 位 置 
(CemptyLocXx，emptyLoc.y)，clickLoc 记录 用 户 单 击 的 位 置 (clickLoc.x，clickLoc.y)。 而 一 
个 bool 变量 solved 是 指 拼图 是 否 完成 ， 所 有 的 拼图 都 找到 正确 的 位 置 后 ， 设 置 它 为 true。 


Var context = document .getElementByIlId('"'puzzle') .getContext ('2d"'); 
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Var img = new Image () 7 

img.src = "dimetrodon.jpg'7 

jimg-addEventListener('load',drawTiles,false); //1load 事件 侦 听 ， 即 图 片 加 载 完成 事件 
Var boardsize = document .getElementById('puzzle') .width;y// 获 取 画 板 〈 画 布 ) 的 宽度 
var tileCount = document.getElementById('scale') .value;// 获 取 滑 块 的 值 
var tileSize = boardSize / tileCount; 

Var clickLoc = new Object (); 

clickLoc.x = 0; 

clickLoc.y = 0; 

Var emptyLoc = new Object (); 

emptyLoc.x = 0; 

emptyLoc.y = 0; 

var solved = false; // 拼 图 是 否 完成 ，False 为 未 完成 


下 面 实现 拼 块 的 随机 排列 。 

我 们 使 用 一 个 一 维 数组 存储 每 个 拼 块 的 编号 。 每 一 个 元 素 代表 一 个 拼 块 ， 初 始 时 元 素 
的 数组 下 标 与 拼 块 的 编号 相同 ， 说 明 位 置 正确 。 所 以 需要 打 乱 数组 的 元 素 顺序 ， 实 现 拼 块 
的 随机 排列 。 而 数组 的 元 素 顺序 打 乱 使 用 带 有 排序 函数 的 Array.sort0) 方 法 来 实现 。 


Var boardParts = new Object () 7 
initBoard(); // 初 始 化 拼 块 ， 并 随机 排列 
function initBoard() { 
boardParts = new Array(tileCount * tileCount); 
for (var i = 0; i < tileCount * tileCount; i++) { 
boardParts[i] = i; 
} 
shift(); // 拼 块 的 随机 排列 
} 
function sortNumber (a,b) {// 随 机 排序 函数 
return Math.random() > 0.5 ? -1 :1; 
} 
function shift() {  // 拼 块 的 随机 排列 
boardParts.sort (sortNumber); 
emptyLoc.x = 0; 
emptyLoc.y = 0; 
solved = false; 
} 


以 上 就 实现 了 拼 块 的 随机 放置 。 但 是 真正 显示 拼 块 在 屏幕 上 的 是 drawTilesO 函 数 。 
drawTiles() 函 数 用 于 显示 各 个 拼 块 ， 该 函数 判断 是 否 是 空白 拼图 的 位 置 (emptyLoc.x， 
emptyLoc.y)， 不 是 则 调用 drawImage() 绘 制 相应 图 块 。 

drawImage() 最 常用 的 是 传 入 三 个 参数 : image 对 象 , 以 及 图 片 相 对 于 画布 的 x, y 坐标 。 


drawImage (image, x, y); 


还 可 以 加 入 两 个 参数 用 于 设置 图 片 的 宽 和 高 : 














drawImage (image, x, y, width, height); 
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最 复杂 的 drawImage 函数 有 9 个 参数 ， 按 顺序 分 别 为 : 图 片 对 象 、 图 片 x 坐标 、 图 片 
y 坐标 、 图 片 宽 、 图 片 高 、 目 标 x 坐标 、 目 标 y 坐标 、 目 标 宽 和 目标 高 。 后 4 个 参数 主要 
是 为 了 截取 原 图 部 分 用 来 显示 。 这 里 把 boardParts 记录 的 拼 块 显示 在 (ix*tileSize,j*tileSize) 
处 。 


// 绘 制 所 有 拼 块 
function drawTiles() { 
context .clearRect (0, 0, boardsize, boardsize); 
for (var i = 0; i < tileCount; i++) { 
for (var j = 0; j < tileCount; j++) { 
var n = boardParts[i * tileCount + j]; 
// 计 算出 编号 为 n 的 拼 块 在 原 图 的 位 置 坐标 行列 号 ) 
var x = parseInt (n / tileCount); // 丢 弃 小 数 部 分 ， 保 留 整 数 部 分 
Var y = n $% tileCount; 
console.log(x + ":" + Math.floor(n / tileCount) + ":" + y); 
if (i!= emptyLoc.x||j!= emptyLoc.yl|solved==true) {// 不 是 空白 拼 
图 的 位 置 且 游戏 未 结束 
// 或 者 if( ! (i== emptyLoc.x&&j== emptyLoc.y&&solved==false) ) 可 能 
更 容易 明白 
// 将 编号 为 n 的 拼 块 显示 在 (i * tilesize，j * tilesize) 处 
Context .drawImage (img, x * tileSize, y * tileSize，tileSize， 
tileSize， 
i * tileSize, j * tileSize, tileSize, tileSize); 


} 

以 下 是 事件 定义 。 

首先 为 滑 块 定义 触发 事件 ， 当 它 改 变 了 ， 我 们 要 重新 计算 拼 块 的 数量 和 大 小 。 滑 块 被 
移动 时 触发 onchange 事件 ， 事 件 中 计算 拼 块 宽度 大 小 ， 重 新 初始 化 画布 ， 显 示 各 个 拼 块 。 


document .getElementById('scale') .onchange = function() { 
tileCount = this.value; 
tilesize = boardsize / tilecount;// 计 算 拼 块 宽度 大 小 
initBoard() ?// 重 新 初始 化 拼 块 ， 并 随机 排列 
drawTiles () ;// 显 示 各 个 拼 块 
] 7 


还 要 追踪 鼠标 经 过 的 拼 块 以 及 哪个 拼 块 被 单 击 。 画板 中 移动 鼠标 的 onmousemove 事件 
中 ， 计 算出 鼠标 所 在 网 格 坐 标 clickLoc.x，clickLoc.y。 


document .getElementById('puzzle') .onmousemove = function(e) 1{ 
clickLoc.x = Math.floor((e.pagex - this.offsetLeft) / tileSize) 7 
clickLoc.y = Math.floor((e.pageY - this.offsetTop) / tilesize); 

}; 














画布 中 单 击 鼠 标的 onmousemove 事件 中 ， 计 算出 鼠标 所 在 网 格 坐标 clickLoc.x， 
clickLoc.y 与 空 块 位 置 间隔 ， 如 果 间 距 为 1 则 移动 被 单 击 的 拼 块 。 
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document .getElementById('puzzle') .onclick = function() { 
if (distance(clickLoc.x, clickLoc.y, emptyLoc.x, emptyLoc.y) == 1) { 
slideTile (emptyLoc，clickLoc) ;// 交 换 被 单 击 的 拼 块 与 空 块 位 置 
drawTiles () ;// 显 示 各 个 拼 块 
} 
if (solved) {// 如 果 成 功 
setTimeout (function() {alert ("你 成 功 了 !");}，500); 
} 
1 
function distance(xl1l, yl, x2, y2) { 
return Math.abs (xX1 - x2) + Math.abs (yl - y2); 


注意 有 一 些 浏览 器 会 在 重 画 画布 之 前 弹出 对 话 框 , 为 了 防止 它 的 发 生 ，-- 定 要 用 延迟 。 
setTimeout (function() {alert ("你 成 功 了 !1");}，500); 


这 人 名 就 是 延迟 0.5 秒 后 ， 再 弹出 提示 框 “你 成 功 了 !”。 
slideTile(emptyLoc，clickLoc) 是 移动 被 单 击 的 拼 块 clickLoc 到 空 块 位 置 emptyLoc。 移 
动 拼 图 的 做 法 是 ， 交换 对 应 的 boardParts 元 素 ， 然 后 把 单 击 位 置 设置 成 空 块 位 置 。 


function slideTile (emptyLoc，clickLoc) { 
if (!solved) { 


Var 七 7 
t= boardParts [emptyLoc.x * tileCount+emptyLoc.y]; 


boardParts [emptyLoc.x*tileCount+emptyLoc.y]=boardParts [clickLoc.x* 


tileCount+clickLoc.y]; 
boardParts[clickLoc.x * tileCount + clickLoc.y] = t; 


emptyLoc.x = clickLoc.x; //emptyLoc 重新 记录 空白 块 位 置 
emptyLoc.y = clickLoc.y; 
checkSolved() ; // 检 查 是 否 成 功 


} 


一 旦 拼图 移动 了 ， 我 们 还 要 检查 一 下 拼图 是 否 全 部 在 正确 的 位 置 。checkSolvedO 检 查 
是 否 成 功 。 如 果 有 一 个 拼 块 不 正确 函数 就 会 返回 false， 和 否则 返回 tue。 


function checkSolved() { 
var flag = true; 
for (Var i = 0; i < tileCount * tileCount; i++) { 


if (boardParts[i] != i) // 判 断 元 素 排列 顺序 
flag = false; 


} 
solved = flag; 


} 
至 此 我 们 完成 了 拼图 游戏 的 设计 。 
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扑克 翻 牧 游戏 





节 扑克 翻 牌 游戏 介绍 


扑克 翻 牌 游 戏 就 是 桌面 24 张 牌 ， 玩 家 翻 到 两 张 相同 扑 克 牌 则 消去 ， 如 果 2 分 钟 到 了 ， 
仍然 没有 成 功 则 游戏 失败 ， 扑 克 翻 牌 游戏 运行 结果 如 图 8-1 所 示 。 
f - To | 
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图 8-1 扑克 有 牌 翻 牌 游戏 运行 界面 


攻 色 程序 设计 的 思路 


“8.2.1 HTMLS 倒 计时 功能 


HTML5 倒计时 功能 可 以 使 用 setTimeout0 函 数 或 者 setInterval0 函 数 来 实现 。 

1. 使 用 setTimeout 实现 倒计时 功能 

setTimeout() 会 在 一 个 指定 的 延迟 时 间 之 后 调用 一 个 函数 或 执行 一 段 指 定 的 代码 。 它 的 
应 用 非常 广泛 ， 例 如 我 们 希望 用 户 在 浏览 器 某 个 页 面 一 段 时 间 后 弹出 一 个 对 话 框 ， 或 者 是 
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鼠标 单 击 某 个 元 素 后 隔 几 秒 再 删除 这 个 元 素 。 
setTimeout 函数 的 语法 : 


setTimeout (code,millisec) 
例如 : 
var 七 = setTimeout ("javascript 语句 "， 毫 秒 ) 


setTimeout() 的 第 一 个 参数 code 是 含有 JavaScript 语句 的 字符 串 。 这 个 语句 可 以 是 
"alert('5 seconds!)" 的 形式 ， 或 者 对 函数 的 调用 ， 如 "alertMsg0"。 第 二 个 参数 millisec 指示 
从 当前 起 等 待 多 少 毫秒 后 执行 第 一 个 参数 code。 

setTimeout() 函 数 会 返回 某 个 值 。 在 上 面 的 语句 中 ， 值 被 存储 在 名 为 t 的 变量 中 。 假 如 
希望 取消 这 个 setTimeout()， 可 以 使 用 clearTimeout(t) 来 实现 。 

需要 强调 的 是 ，setTimeout() 只 执行 code 一 次 。 如 果 要 多 次 调用 ， 可 以 让 code 自身 再 
次 调用 setTimeout()。 

例如 下 面 代码 调用 setTimeoutO 实 现 1 小 时 倒计时 : 



































<body> 

<div id="timer"></div> 

<script type="text/javascript" language="javascript"> 
var dl=new Date();// 年 月 日 时 分 秒 

Var d2=dl.getTime ()+60*60*1000 

Var endDate=new Date (dq2) 7 

function daoJishi () 


Var now=new Date(); 
Var oft=Math.round ( (endDate-now) /1000) 


var ofd=parseInt (oft/3600/24); // 天 
var ofh=parseInt((ofts(3600*24) ) /3600) ; // 小 时 
Var ofm=parseInt ( (oft%3600)/60); VE 
Var ofs=oft%60; // 秒 


document .getElementById('timer') .innerHTML=' 还 有 '+ofd+' 天 '+ofh+' 小 时 
"+ofm+' 分 钟 '+ofs+' 秒 ' 7 

if(ofs<0)1{ 

document .getElementById('timer') .innerHTML=' 倒 计时 结束 ! ';return; 

}; 

setTimeout ('daoJishi ()',1000); // 自 身 再 次 调用 daoJishi () 

BF 

daoJishi(); 

</acript> 

</body> 


2. 使 用 setlnterval 实现 倒计时 功能 


setTimeoutO 只 执行 代码 code 一 次 。 如 果 要 多 次 调用 code 可 以 使 用 setInterval()。 
setInterval () 可 按照 指定 的 周期 (以 毫秒 计 ) 来 调用 需要 重复 执行 的 函数 代码 。 
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setInterval 函数 的 语法 : 
setInterval (function, intervall[,argl,arg2,..,argn]) 


其 中 function 参数 可 以 是 一 个 匿名 函数 或 是 一 个 函数 名 ,interval 是 设 定 的 调用 function 




















的 时 间 间 隔 ， 单 位 为 毫秒 〈 默 认 值 为 10 毫秒 )，argl1,arg2,…,argn 为 可 选 参数 ， 是 传递 给 
function 的 参数 。 


下 面 的 例子 每 隔 1 秒 调用 一 次 匿名 函数 。 
setInterval (function () {trace ("每 隔 1 秒 钟 我 就 会 显示 一 次 ") }, 1000); 


这 里 的 function0 介 是 没有 函数 名 的 函数 ， 称 为 匿名 函数 ， 后 面 的 1000 是 时 间 间 隔 ， 


单位 是 毫秒 ， 即 1 秒 钟 。 


下 面 的 例子 为 我 们 展示 如 何 带 参 数 运 行 。 


function showl(){ 
trace (" 每 隔 1 秒 显示 一 次 "); 
3 
function show2(str){ // 带 参数 函数 show2 
trace (str); 
} 
setIinterval (showl, 1000); 
setInterval (show2, 2000, "每 隔 2 秒 我 就 会 显示 一 次 ") ; // 调 用 带 参数 函数 show2 


setInterval() 会 不 停 地 调用 函数 ,直到 clearInterval() 被 调用 或 窗口 被 关闭 ,由 setmtervalO 


返回 的 ID 值 可 用 作 clearInterval(ID) 方 法 的 参数 。 在 游戏 开发 中 ， 常 常 使 用 setInterval() 制 
作 游 戏 动画 或 其 他 间隔 性 泻 染 效 果 。 


Var intervalID = setInterval (showl,1000) 
clearInterval (intervalID) ; // 取 消 该 定时 设置 


例如 下 面 代码 用 setInterval0 实 现 1 小 时 倒计时 : 


<body> 

<div id="timer"></div> 

<script type="text/javascript" language="javascript"> 
var dl=new Date();// 年 月 日 时 分 秒 

Var d2=dl.getTime ()+60*60*1000 

Var endDate=new Date (dq2) 7 

function daodJiShi() 


Var now=new Date () 7 

Var oft=Math.round( (endDate-now) /1000); 
Var ofd=parseInt (oft/3600/24) 

Var ofh=parseInt((ofts(3600*24)) /3600) 7 
Var ofm=parseInt ( (oft%3600)/60); 

Var ofs=oft%®60; 
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document .getElementById('timer') .innerHTML=' 还 有 '+ofd+' 天 '+ofh+' 小 时 "+ 
ofm+' 分 钟 '+ofs+' 秒 '; 
if(ofs<0){ 
document .getElementById('timer') .innerHTML=' 倒 计时 结束 ! ';return; 
] 7 


] 7 

setInterval('daoJiShi ()',1000);// 间 隔 1 秒 钟 调用 
</script> 

</body> 









游戏 中 使 用 的 扑克 牌 牌 面 及 背面 采用 1 张 图 片 (deck.png) 存储 ,如 图 8-2 所 示 。 上 面 
4 行 分 别 为 4 种 花色 的 扑克 牌 ， 最 后 一 行 扑克 牌 背面 ， 每 行 高 度 为 120px。 如 何 分 割 显示 某 
- 张 扑克 牌 ， 这 里 使 用 CSS3 技术 来 实现 。 


hh hhh 
Goad 
hh hh htc 
AAA 


图 8-2 存储 扑克 有 牌 的 图 片 deck.png 
例如 想 显 示 扑克 上牌 背面 图 案 可 按 如 下 代码 写 CSS 类 别 : 


.front 

{ 
width: 80px; height: 120px; 
background-image: url("../images/deck.png"); 
background-position: 0 -480px; 
z-index: 10; 

} 

类 别 .front 的 背景 图 片 是 deck.png，background-position 设置 背景 图 片 的 位 置 。 例 如 
background-position:0 0: 表 示 背 景 图 片 的 左上 角 将 与 容器 元 素 的 左上 角 对 齐 。 该 设置 与 
background-position:left top: 或 者 background-position:0% 0%; 设 置 的 效果 是 一 致 的 。 

而 background-position: 0 -480px: 表 示 图 片 以 容器 左上 和 角 为 参考 向 左 偏 移 0px， 向 上 偏 
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移 480px， 从 而 正好 是 扑克 牌 背 面 图 片区 域 。 

z-index 属性 设置 元 素 的 堆 蓓 (显示 ) 顺序 。 拥 有 更 高 堆 县 顺 序 的 元 素 总 是 会 处 于 堆肥 
顺序 较 低 的 元 素 前 面 。 

background 简写 属性 可 在 一 个 声明 中 设置 所 有 的 背景 属性 。 可 以 设置 如 下 属性 : 
background-color 、background-position、background-size 、background-repeat、background- 
origin、background-clip、background-attachment、background-image。 如 果 不 设置 其 中 的 某 
个 值 ， 也 是 允许 的 。 例 如 : 


background: #999 url("../images/deck.png")0 -480px; 





























background:#ff0000 url('smiley.gif'); 
显示 扑克 牌 牌 面 图 案 可 按 如 下 代码 写 CSS 类 别 : 


-back 

{ 
width: 80px; height: 120px; 
background: #efefef url("../images/deck.png"); 
-webkit-transform-rotateY(-180deg); /* 其 中 -180 deg 是 旋转 的 角度 */ 
z-index: 8; 

} 


.cardAJ{background-position: -800px 0;} 

background-position: -800px 0; 表 示 图 片 以 容器 左上 角 为 参考 向 左 偏 移 800px, 由 于 图 片 
中 每 张 牌 宽度 为 80px， 所 以 正好 显示 出 黑 桃 J。 

.cardBJ{background-position: -800px -120px:} 

background-position: -800px -120px: 表 示 图 片 以 容器 左上 角 为 参考 向 左 偏 移 800px， 所 
以 正好 显示 出 红 桃 J， 向 上 偏 移 120px。 

.cardCJ{background-position: -800px -240px:} 

background-position: -800px -120px:; 表 示 图 片 以 容器 左上 角 为 参考 向 左 偏 移 800px， 所 
以 正好 显示 出 梅花 J， 向 上 偏 移 120px。 

.cardDJ{background-position: -800px -360px:} 

background-position: -800px -120px: 表 示 图 片 以 容器 左上 角 为 参考 向 左 偏 移 800px， 所 
以 正好 显示 出 方块 J， 向 上 偏 移 120px。 

<div class="back cardAJ "/> 就 能 显示 出 黑 桃 J，<div class="back cardBJ "> 就 能 显示 出 
红 桃 J，<div class="back cardCJ "> 就 能 显示 出 梅花 J，<div class="back cardDJ "/> 就 能 显示 
出 方块 J。 其 他 牌 的 显示 原理 一 样 ， 仅 仅 background-position 中 的 偏 移 量 不 同 。 

z-index 设置 为 8， 所 以 牌 面 显示 在 扑克 牌 背面 下 方 被 隐藏 。 
? 8.2.3 ”扑克 牌 的 删除 


扑克 牌 的 删除 采用 设置 透明 度 来 实现 。 


.card-removed/* 移 除 牌 */ 
{ 





opacity: 0; 
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} 


opacity: 0 设置 div 的 不 透明 度 为 0。Opacity 取 值 从 0.0 (完全 透明 ) 到 1.0 (完全 不 透 
明 )。 也 可 以 使 用 visibility: hidden 来 实现 ， 这 两 个 效果 都 是 让 元 素 不 显示 ， 但 visibility: 
hidden 意思 是 让 元 素 不 可 见 ， 但 仍 会 占据 页 面 上 的 空间 。 

?8.2.4 添加 删除 类 别 Class 


扑克 牌 的 显示 、 隐 藏 和 删除 都 是 CSS 中 类 别 Class。 需 要 将 这 些 类 别 设置 到 HTML 的 
标记 元 素 (例如 <div>) 上 ， jQuery 中 的 addClass 方法 用 于 添加 类 别 Class， 而 removeClass 
方法 用 于 删除 类 别 Class。 

addClass( className ) 中 的 className 为 一 个 字符 串 ， 为 指定 元 素 添 加 这 个 classname 
类 别 。removeClass(className ) 指 定 元 素 移 除 的 一 个 或 多 个 用 空格 隔 开 的 样式 名 或 类 别 。 

举例 说 明 : 

比如 有 一 个 <div>: 

















<div class="menu"> 

<a href="www.zut.edu.cn"> 中 原 工学 院 </a> 
<a href="www.zzu.edu.cn"> 郑 州 大 学 </a> 
</div> 


使 用 jQuery 实现 ， 当 单 击 “ 中 原 工 学 院 ” 的 时 候 自动 添加 class="select"， 代 码 自 动 就 
变 成 : 

<div class="menu"> 

<aclass="select" href="www.zut.edu.cn"> 中 原 工 学 院 </a> 


<a href="www.zzu.edu.cn"> 郑 州 大 学 </a> 
</div> 


然后 单 击 “ 郑 州 大 学 ” 又 变 成 


<div class="menu"> 

<ahref="www.zut .edu.cn"> 中 原 工 学 院 </a> 

<a class="select" href="www.zzu.edu.cn"> 郑 州 大 学 </a> 

</div> 

jQuery 可 以 如 下 实现 : 

$ (document) .ready (function(){ 

$("a") .click(function(){ 
$ ("a") .each (function () {$ (this) .removeClass ("select") }) , // 删 除 "select" 
类 别 

$ (this) .addclass ("select"),// 当 前 被 单 击 的 <a> 元 素 增加 "select" 类 别 
return false}) 

}) 


jQuery 代码 中 $("a") 选 择 所 有 的 <a> 元 素 ， 在 <a> 元 素 的 单 击 事件 中 ，each() 遍 历 所 有 的 
<a> 元 素 并 删除 <a> 元 素 上 的 "select" 类 别 。 S(this) 代 表 当 前 被 单 击 的 <a> 元 素 ， 











$(this).addClass("select") 是 给 当前 被 单 击 的 <a> 元 素 增加 "select" 类 别 。 


data() 方法 向 被 选 元 素 附加 数据 ， 或 者 从 被 选 元 素 获取 数据 。 


EE 到 程序 设计 的 步骤 
”8.3.1 设计 CSS ( matchgame.css ) 
根据 程序 


body 
{ 















设 


计 的 思路 设计 如 下 的 CSS 文件 : 


text-align: center; 

background-image: url("../images/bg.jpg"); 

} 

#game 

{ 
width: 502px; 
margin: 0 auto; 
border: lpx solid #666; 
border-radius: 


height: 462px; 


10px; 
background-image: url("../images/table.jpg"); 
position: relative; 

display: -webkit-box; 
—webkit-box-pack:center; 
—webkit-box-align:center; 


#cards ”/* 所 有 的 扑克 有 牌 显示 





区 域 */ 


width: 380px; height: 400px; 


.card 


width: 80px; height: 120px; position: absolute; 





.face 

{ 
width: 100%; 
height: 100%; 
border-radius:10px; 
position: absolute; 
—webkit-backface-visibility: hidden; 
—webkit-transition:all .3s; 

} 

.front 

攻 


position: relative; 
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margin:30px auto; 
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background: #999 url("../images/deck.png")0 -480px; 
z-index: 10; 

} 

.back 

{ 
background: #efefef url("../images/deck.png"); 
-webkit-transform-rotateY(-180deg) ; 
z-index: 8; 

} 

.face:hover 

{ 
—webkit-box-shadow: 0 0 40px #aaa; 


} 

/* 牌 面 定位 样式 */ 
.CardAJ{background-position: -800px 
.cardAaQ{background-position: -880px 
.CardAK{background-position: -960px 0;} 
.CardBJ{background-position: -800px -120px;} 
.cardBQ{background-position: -880px -120px;} 
.CardBK{background-position: -960px -120px;} 
.CardCcJ{background-position: -800px -240px;} 
.CardCcofbackground-position: -880px -240px;} 
.CardCK{background-position: -960px -240px;} 
.cardDJ{background-position: -800px -360px;} 
.cardDo{background-position: -880px -360px;} 
.CardDK{background-position: -960px -360px;} 
.card-flipped .front 


/* 保 证 牌 底 在 牌 面 下 面 ，z-index 值 切换 为 小 值 */ 
z-index: 8; 
-webkit-transform: rotateY (180deg); 

} 

.card-flipped .back 


{ 
/* 保 证 牌 底 在 牌 面 上 面 ，z-index 值 切换 为 大 值 */ 
z-index: 10; 
/* 前 面 牌 面 已 经 翻 过 去 ， 现 在 翻 回来 */ 
—webkit-transform: rotateY (0deg); 

} 

/* 移 除 牌 */ 


-Card-removed{ opacity: 0;} 








游戏 页 面 中 , 每 张 牌 的 区 域 是 一 个 id="card" 的 <div>, 其 中 含 上 下 层 有 两 个 <div>, <div 


class="face front"> 是 上 层 显 示 背 面 ，<div class="face back"> 是 下 层 显 示 牌 面 。 











<div 


class="card"> 


<div class="face front"></div> 


<div 


class="face back"></div> 


</div> 


最 初 仅仅 有 1 张 牌 的 区 域 ， 其 余 的 23 张 牌 的 区 域 是 页 面 加 载 后 复制 实现 的 。 


注意 ， 
页 面 加 载 后 ， 首 先 利 ) 
CSS 坐标 属性 "left"、"top"， 设 置 每 张 牌 的 
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Array.sort() 将 deck 数组 存储 的 牌 随机 排序 ， 实 现 洗 牌 效果 。 调 整 





区 域 <div> 在 屏幕 上 的 位 置 。 最 后 在 每 张 牌 的 区 


域 <div> 中 的 下 层 <div class="face back"> 添 加 类 别 〈 如 .cardAJ，.cardBJ) 就 可 以 显示 对 应 


牌 面 。 


<!DOCTYPE html> 

<html> 

<head> 

<meta charset="UTF-8"> 
<title>html5 扑克 翻 牌 消除 小 游戏 </title> 

<link href="styles/matchgame.css" rel="stylesheet"> 
</head> 
<body> 
<script type="text/javascript" src="matchgame.js"></script> 


<script type="text/javascript" src="jquery-1.11.1.min.js"></script> 


<section id="game"> 


<div 
<div 
<div 
<div 


id="cards"> 

class="card"> 

class="face front"></div> 
class="face back"></div> 


</div> 
</div> 
</section> 


<script type="text/javascript"> 


Var success=false; 


$ (document) .ready (function(){ 


// 实 现 随机 洗 牌 


matchingGame .deck.sort (shuffle); 


Var $card=$ (".card"); 


for(var i= 0;i<23;i++) 


$card.clone() .appendTo ($ ("#cards")); 


// 对 每 张 牌 进行 设置 


$(".card") .each (function (index) 


// 调 整 坐标 
$ (this) .css({ 


"left": (matchingGame.cardWidth+20)*(index%8)+"px", 
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"top": (matchingGame.cardHeight+20)*Math.floor (index/8)+"px" 
上 
// 从 数组 deck 取 一 个 牌 如 "cardAK",， "cardBJ" 
Var pattern=matchingGame.deck.pop(); 


// data() 方 法 向 被 选 元 素 附 加 数据 ， 这 里 "pattern" 存 储 牌 类 别 数 据 如 "cardAK"， 


"cardBJ" 


$ (this) .data("pattern",pattern); 
// 把 其 翻 牌 后 的 对 应 牌 面 附加 上 去 
$ (this) .find(".back") .addclass (pattern) ;// 添 加 类 别 就 可 以 显示 对 应 牌 面 
$(this) .click(selectCcard) ; // 指 定单 击 牌 事件 的 功能 函数 selectcard 
]) 
]) 
</script> 
<div style="text-align:center;margin:50px 0; font:normal 44px/56px "> 
<p> 扑 克 翻 牌 游戏 </p> 
<div id="timer"></div> 
</div> 
<script type="text/javascript" language="javascript"> 
Var success=false; 
var dl=new Date();// 年 月 日 时 分 秒 
Var d2=dl.getTime ()+2*60*1000 
Var endDate=new Date (d2) 
function daoJishi () 
{ 
Var now=new Date(); 
Var oft=Math.round ( (endDate-now) /1000) 7 
Var ofd=parseInt (oft/3600/24) 7 
Var ofh=parseInt ( (oft 当 (3600*24) ) /3600) 7 
Var ofm=parseInt ( (oft%3600)/60); 
Var ofs=oft%60; 
document .getElementById('timer') .innerHTML=' 还 有 '+ofm+ ' 分 钟 ' +ofs+' 秒 


if(success==true) return;// 停 止 计时 
if(ofs<0){ 
document .getElementById('timer') .innerHTML=' 倒 计时 结束 ! '; 
if (success==false)alert(' 你 挑战 失败 了 ! '); 
return; 
多 
setTimeout ('daoJishi()',1000); 
} 
daoJishi (); 
<Haeripts 
</body> 
</html> 
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?8.3.3 ”设计 脚本 (matchgame.js ) 


定义 存储 所 有 牌 的 数组 deck。 


Var matchingGame={}; 
matchingGame .cardwidth=80;// 牌 宽 
matchingGame .cardHeight = 120; 
// 存 储 所 有 的 牌 

matchingGame .deck= 


[ 





"cardRAK" "cardAK", "cardRQ","cardRQ"，"cardRJ" "cardRJ"， 
ncCardBK CaIGBK “cardBQ", cardBQ "cardBJ", "cardBg", 
CaEGCK7 CazGCK “CardeQny ”CardcQor “CardcJ ”CaFdCJwy 
eardDE™ CaODRALCadDONALCardDO RCRTUDJ “Card 
] 
// 随 机 排序 函数 ， 返 回 -1 或 1 
function shuffle() 
{ 
//Math .random 能 返回 0~1 之 间 的 数 
return Math.random()>0.5 ? -1 : 1 
} 


单 击 牌 事件 的 功能 函数 selectCard0 实 现 翻 牌 的 功能 。 被 翻 过 的 牌 都 已 添加 
"card-fliipped" 类 别 。 所 以 $(".card-flipped") 获 取 所 有 的 翻 过 牌 的 <div>， 数 量 超过 1 则 说 明 已 
翻 了 两 张 牌 ， 不 能 再 翻 牌 而 退出 翻 牌 。 

若 翻 动 了 两 张 牌 ， 检 测 是 否 相 同 。 


function selectcard() {// 翻 牌 功能 的 实现 
Var $fcard=$ (".card-flipped"); 
// 翻 了 两 张 牌 后 退出 翻 牌 
if($fcard.length>1) 
{ 
return; 
} 
$ (this) .addclass ("card-flipped"); 
// 以 下 是 车 翻动 了 两 张 牌 ， 检 测 一 致 性 
Var $fcards=$ (".card-flipped"); 
if ($fcards.length==2) 
{ 
setTimeout (function(){ 
checkPattern($fcards);},700); 
} 
// 检 测 两 张 牌 是 否 一 致 
function checkPattern (cards) 
{ 
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至 此 就 完成 扑克 翻 牌 游戏 。 
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推 箱子 游戏 





好 推 钉子 游戏 介绍 


经 典 的 推 箱子 是 一 个 来 自 日 本 的 古老 游戏 ， 目 的 是 在 训练 玩家 的 逻辑 思考 能 力 。 在 一 
个 狭小 的 仓库 中 ， 要 求 把 木 箱 放 到 指定 的 位 置 ， 稍 不 小 心 就 会 出 现 箱子 无 法 移动 或 者 通道 


被 堵 住 的 情况 ， 
能 顺利 地 完成 f 


所 以 需要 巧妙 地 利用 有 限 的 空间 和 通道 ， 合 理 安 排 移动 的 次 序 和 位 置 ， 才 
- 务 。 


推 箱子 游戏 功能 如 下 : 
游戏 运行 载 入 相应 的 地 图 ， 屏 幕 中 出 现 一 个 推 和 钉子 的 工人 ， 其 周围 是 围墙 苗 、 人 可 以 


走 的 通道 、 必 


L 个 可 以 移动 的 箱子 萎 和 箱子 放置 的 目的 地 图 。 让 玩家 通过 按 上 下 左右 键 控 


制 工人 霹 推 钉子 ， 当 箱子 都 推 到 了 目的 地 后 出 现 过 关 信 息 ， 并 显示 下 一 关 。 推 错 了 玩家 按 
空格 键 重新 玩 这 关 ， 直 到 过 完全 部 关卡 。 





本 章 开 发 


E 箱 子 游戏 ， 游 戏 界面 如 图 9-1 所 示 。 








第 ! 关 移动 次 数 , 0 
二 下 一 关 | 势 销 移动 || 重 玩 本 关 恬 EE 
































图 9-1 ” 推 箱 子 游戏 界面 








本 游戏 使 








的 图 片 元 素 的 含义 如 图 9-2 所 示 。 
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天 上 是 全 Tr 


ball.gif block.gif box.gif down.png redbox.gif wall.gif 
目的 地 通道 箱子 工人 箱子 已 在 目的 地 围墙 


图 9-2 ”本 游戏 使 用 的 图 片 元 素 














其 中 人 物 行走 不 同方 向 使 用 不 同 的 图 片 ， 如 图 9-3 所 示 。 


铺 $ 邹 多 


down.png leftpng rightpng up.png 








图 9-3 人 物 行走 不 同方 向 使 用 不 同 的 图 片 


程序 设计 的 思路 


首先 我 们 来 确定 一 下 开发 难点 。 对 工人 的 操作 很 简单 ， 就 是 四 个 方向 移动 , 工人 移动 ， 
箱子 也 移动 ， 所 以 对 按键 处 理 也 比较 简单 些 。 当 箱子 到 达 目 的 地 位 置 时 ， 就 会 产生 游戏 过 
关 事件 ， 需 要 一 个 逻辑 判断 。 那 么 我 们 仔细 想 一 下 , 这些 所 有 的 事件 都 发 生 在 一 张 地 图 中 。 
这 张 地 图 包括 了 箱子 的 初始 化 位 置 、 箱 子 最 终 放 置 的 位 置 ， 以 及 围墙 障碍 等 。 每 一 关 地 图 
都 要 更 换 ， 这 些 位 置 也 要 变 。 所 以 我 们 发 现 每 关 的 地 图 数据 是 最 关键 的 ， 它 决定 了 每 关 的 
不 同 场景 和 物体 位 置 。 那 么 我 们 就 重点 分 析 一 下 地 图 。 

我 们 把 地 图 想象 成 一 个 网 格 ， 每 个 格子 就 是 工人 每 次 移动 的 步 长 ， 也 是 箱子 移动 的 距 
离 ， 这 样 问题 就 简化 多 了 。 首 先 我 们 设计 一 个 16X16 的 二 维 数 组 curMap。 按 照 这 样 的 框 
架 来 思考 。 对 于 格子 的 X，Y 两 个 屏幕 像素 坐标 ， 可 以 由 二 维 列表 下 标 换算 。 

每 个 格子 状态 值 分 别 用 值 (0〉 代 表 通 道 Block，(1) 代表 墙 Wall，(2) 代表 目的 地 
Ball，(3) 代表 箱子 Box，(4) 代表 工人 CurMan,， (5) 代表 放 到 目的 地 的 箱子 redBox。 文 
件 中 存储 的 原始 地 图 中 格子 的 状态 值 采 用 相应 的 整数 形式 存放 。 

在 玩家 通过 键盘 控制 工人 推 箱子 的 过 程 中 ， 需 要 按 游戏 规则 进行 判断 是 否 响应 该 按键 
指示 。 下 面 分 析 一 下 工人 将 会 遇 到 什么 情况 ， 以 使 归纳 出 所 有 的 规则 和 对 应 算法 。 为 了 描 
述 方便 ， 可 以 假设 工人 移动 趋势 方向 向 右 ， 其 他 方向 原理 是 一 致 的 。 如 图 9-4 所 示 ，P1、 
P2 分 别 代表 工人 移动 趋势 方向 的 前 两 个 方 格 。 























图 9-4 工人 移动 趋势 向 右 
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游戏 规则 判断 如 下 : 

(1) 判断 P1 是 否 出 界 ， 是 的 话 则 退出 规则 判断 ， 布 局 不 做 任何 改变 : 
if(pl.x<0) return false; 

if(pl.y<0) return false; 

if (pl.y>=curMap.length) return false; 

if (pl.x>=curMap[0] .length) return false; 

(2) 前 方 Pl 是 围墙 。 

如 果 工 人 前 方 是 围墙 ( 即 阻挡 工人 的 路 线 ) 

{ 
退出 规则 判断 ， 布 局 不 做 任何 改变 ; 

} 

if (curMap[pl.y] [pl.x]==1)return false;// 如 果 是 墙 ， 不 能 通行 


(3) 前 方 Pl 是 箱子 ， 如 图 9-5 所 示 。 




















图 9-5 工人 前 方 是 箱子 


在 前 面 的 情况 中 ， 只 要 根据 前 方 P1 ib ee 而 在 
第 3 种 情况 中 ， 需 要 判断 箱子 前 方 P2 处 的 物体 才能 判断 出 工人 是 否 可 以 移动 。 此 时 有 以 
下 可 能 : 

Q P1 处 为 箱子 或 者 放 到 目的 地 的 箱子 ，P2 处 为 墙 或 箱子 。 

如 果 工 人 前 方 P1 处 为 箱子 或 者 放 到 目的 地 的 箱子 ，P2 处 为 墙 或 箱子 ， 退 出 规则 判断 ， 
布局 不 做 任何 改变 。 

if (curMap [pl.y] [pl.x]==3 |1curMap [P1.Y] [pl.x]==5) // 如 果 是 箱子 ， 继 续 判断 前 一 格 

{ 

if (curMap[p2.y] [p2.x]==1 || curMap[p2.y] [p2.x]==3 || 
curMap [p2.y] [p2.x]==5) // 前 一 格 如 果 是 墙 或 箱子 都 不 能 前 进 


return false; 
和 


@ P1 处 为 箱子 或 者 放 到 目的 地 的 箱子 ，P2 处 为 通道 。 

如 果 工 人 前 方 Pl 处 为 箱子 ，P2 处 为 通道 ， 工 人 可 以 进 到 P1 方 格 ，P2 方 格 状态 为 箱 
子 。 修 改 相关 位 置 格子 的 状态 值 。 

@ P1 处 为 箱子 或 者 放 到 目的 地 的 箱子 ，P2 处 为 目的 地 。 


发 
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如 果 工 人 前 方 Pl 处 为 箱子 ，P2 处 为 目的 地 ， 工 人 可 以 进 到 Pl 方 格 ，P2 方 格 状态 为 
放置 好 的 箱子 。 修 改 相关 位 置 格子 的 状态 值 : 


if (curMap [p1.y] [pl1.x] 一 3 11curMap[p1.Y] [pl1.x]==5) // 如 果 是 箱子 ， 继 续 判 断 前 一 格 
if (curMap[p2.y] [p2.x]==0 11 curMap[p2.y] [p2.x] 一 2)// 如 果 P2 为 通道 或 者 目的 地 
‘ 
oldMap = copyArray (curMap); // 记 录 现 在 的 地 图 
// 箱 子 前 进 一 格 
CurMap [p2.Y] [p2.x]=3; 
// 如 果 原 始 地 图 是 目的 地 或 者 是 放 到 目的 地 的 箱子 
if(CurLevel [p2.y] [p2.x]==2 ||CurLevel[p2.y] [p2.x]==5) 
CurMap[p2.y] [p2.x]=5; 
} 
canReDo = true; 
// 工 人 前 进 一 格 
curMap[pl.y] [pl.x]=4; /1/4 代表 工人 
// 处 理工 人 原来 位 置 是 显示 目的 地 还 是 通道 平地 
Var v=CurLevel[per position.y] [per position.x]; // 获 取 工 人 原来 位 置 原始 地 图 信息 
if (v==21| v==5) { // 如 果 原 来 位 置 是 目的 地 或 者 放 到 目的 地 的 箱子 
curMap [per_position.y] [per position.x]=2; // 显 示 目 的 地 
else 
curMap [per position.y] [per position.x]=0; // 显 示 通 道 平地 
} 


综合 前 面 的 分 析 ， 可 以 设计 出 整个 游戏 的 实现 流程 。 


程序 设计 的 步骤 






<html> 

<head> 

<title> 推 箱子 游戏 </title> 

<meta http-equiv=content-type content="text/html; charset=utf-8"> 
</head> 


<body onload="init ()" onkeydown="DoKeyDown (event) "> 

<canvas id="myCanvas" width="560" height="560"> 浏 览 器 还 不 支持 哦 </canvas> 
<div id="msg"></div> 

<img id="block" src="img/block.gif" style="display:none;"> 

<img id="wall" src="img/wall.gif" style="display:none;"> 

<img id="ball" src="img/ball.gif" style="display:none;"> 

<img id="box" src="img/box.gif" style="display:none;"> 

<img id="redbox" src="img/redbox.gif" style="display:none;"> 


<img id="pleft" src="img/left.png" style="display:none;"> 


第 9 章 推 箱子 游戏 


<img id="pright" src="img/right.png" style="display:none;"> 


<img id="pup" src="img/up.png" style="display:none;"> 


<img id="pdown" src= 
<input type="button" 
<input type="button" 
<input type="button" 
<input type="button" 
<input type="button" 


"img/down.png" style="display:none;"> 
value=" 上 一 关 " onclick="NextLevel (-1) "> 
value=" 下 一 关 " onclick="NextLevel (1)"> 
value=" 撤 销 移动 "” onclick="Redo()"> 
value=" 重 玩 本 关 " onclick="NextLevel (0)"> 
value=" 游 戏说 明 " onclick="DoHelp() "> 


<script type="text/javascript" src="mapdatal00.js"></script> 


<script type="text/javascript" src="pushboxl.js"></script> 


</body> 
</html> 


游戏 页 面 主要 设置 图 片 素材 对 应 的 id， 例 如 箱子 图 片 的 id 是 "box"， 目 的 地 图 片 的 id 
是 "ball", 通道 图 片 的 id 是 "block", 已 在 目的 地 的 箱子 id 是 "redbox", 墙 图 片 的 id 是 "wall"。 
人 物 的 上 下 左右 方向 图 片 的 id 分 别 是 "pleft"、"pright"、"pup"、"pdown"。 

界面 上 添加 5 个 功能 按钮 ， 实 现 “ 上 一 关 ”“ 下 一 关 ”“ 撤 销 移 动 "“ 重 玩 本 关 ”“ 游 戏 


说 明 ” 功 能 。 





1. 设计 游戏 地 图 

整个 游戏 在 16X16 区 域 中 ， 使 用 二 维 数组 curMap 存储 游戏 的 状态 。 其 中 方 格 状 态 值 
0 代表 通道 , 1 代表 墙 ，2 代表 目的 地 , 3 代表 箱子 , 4 代表 工人 ,5 代表 放 到 目的 地 的 箱子 。 
例如 图 9-1 所 示 推 箱子 游戏 界面 的 对 应 数据 如 下 : 





?9.3.2 ”设计 脚本 (pushboxl.js ) 
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每 关 地 图 方 格 状态 值 采 用 levels 数组 存储 ， 注 意 levels[0] 存 储 第 一 关 ，levels[1] 存 储 第 
二 关 ， 以 此 类 推 。 本 游戏 存储 100 关 信 息 ， 所 以 把 数组 levels 单独 放置 在 "mapdata100.js" 
脚本 文件 中 。 


Var levels=[]; 
levels[0]=[ 

0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], 
O00 00.0. 0 0 0000r 070. 0 070 
Go OGADRD2O02020R0207020w0 
GO Onororo oo 000 
O07F0rOrorororir ir oO oor Or oo 
9 DR ll On Oo 
A eh es yh PA A I 
OnOrdornl ll S03 2 LrOr Or OO 
W002r0rn Sapir LD 00 Ol 
OQ0roror lrlr ll O00 Ur OO 
OrQnOrnonoror Ole Lodro oo 
LA A Pt Ph A A 
070r0r0r0r0r0rOr0r OrOr OOrnOrOr Os 
Ononor0rorOr ro Dor Og or oo 
0 O00r0n0s Gr0rQD0r 0000 Or 
Or0ron0nororOrnorr oo or ro od 


而 第 二 关 如 下 : 


levels[1]=[ 
OOnOzOxnoronoronoror0xo0x0n0rD0RO 
0250202020070.0202002020707001 
or0Oro 00 Ono or Gr O00 
DrOnOrOrTe Tl lO 00 Ql 
GOAOOL OFD L000 D0 D0 
Cp US eR 9 
GO Or lr ln 
1 
660 tt Pn Db: OO OTDR ON 
DO 0 OA0707 0 Lo 0 0b 
DORO oo TD On Oi lL O00 0 
Orororor orlirlrirliyi O000r0-07r0d 
OO0roroaQr oOo oD On on 
0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], 
070707070707070707070707070707017 
0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]]; 
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程序 初始 时 ， 获 取 对 应 的 图 片 ， 并 将 本 关 iCurLevel 的 地 图 信息 levels[iCurLevel] 复 制 
到 当前 游戏 地 图 数据 数组 curMap 和 CurLevel。curMap 初始 与 CurLevel 相同 ,游戏 中 记录 
不 断 改 变 游戏 状态 。CurLevel 是 当前 关 游 戏 地 图 数据 ， 游 戏 中 不 变 ， 主 要 用 来 获取 箱子 目 
的 地 和 判断 游戏 是 否 结束 。 


Var W=32; 
Var h=32; 
var curMap; // 当 前 游戏 地 图 数据 数组 ， 初 始 与 curLevel 相同 ， 游 戏 中 改变 
var oldMap; // 保 存 上 次 人 物 移动 前 地 图 数据 数组 
var CurLevel;// 当 前 关 游 戏 地 图 数据 ， 游 戏 中 不 变 ， 用 来 判断 游戏 是 否 结束 
var iCurLevel=0;// 当 前 是 第 几 关 
var curMan;// 当 前 小 人 图 片 
var UseTime=0;// 当 前 关 用 时 ， 单 位 : 秒 
Var MoveTimes=0;// 移 动 次 数 
Var mycanvas=document .getElementById('myCanvas'); 
Var context = mycanVas .getContext ('2d"'); 
Var block=document .getElementById ("block"); 
Var box=document .getElementById ("box"); 
var wall=document .getElementById ("wall"); 
Var ball=document .getElementById ("ball"); 
Var redbox=document .getElementById ("redbox"); 
Var pdown=document .getElementById ("pdown"); 
Var pup=document .getElementById ("pup"); 
var pleft=document .getElementById("pleft"); 
Var pright=document .getElementById ("pright"); 
Var msg=document .getElementById ("msg"); 
function init() 
{ 
initLevel (); 
showMoveInfo(); 
} 


initLevel0 将 本 关 地 图 信息 复制 到 当前 游戏 地 图 数据 数组 curMap 和 CurLevel， 并 在 屏 
幕 上 画 出 通道 、 箱 子 、 墙 、 人 物 、 目 的 地 信息 。 


function initLevel() 
{ 
curMap = copyArray (levels[iCurLevel]); 
oldMap = copyArray (curMap); 
CurLevel=copyArray (levels [iCurLevel]); 
curMan=pdown; 
DrawMap (curMap); // 画 通道 、 箱 子 、 墙 、 人 物 、 目 的 地 信息 
} 
function copyArray (arr) // 克 隆 二 维 数组 
‘ 
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Var b=[]; 

for (i=0;i<arr.length;i++) 
bli]=arr[lil concatlt)s 

return b; 


| 


为 了 保存 工人 所 在 位 置 ， 使 用 per position 保存 。 初 始 位 置 在 (5，5) 坐标 。 当 然 在 
绘制 游戏 时 会 根据 地 图 信息 修改 工人 所 在 位 置 per_position。 


function Point (x,y) 
{ 





this.x=x; 
this.y=y; 
} 
Var per position=new Point (5,5); 


2. 绘制 整个 游戏 区 域 图 形 

绘制 整个 游戏 区 域 图 形 就 是 按照 地 图 level 存储 图 形 代 号 ， 获 取 对 应 图 像 ， 显 示 到 
Canvas 上 。 全 局 变量 per position 代表 工人 当前 位 置 (x，y)， 从 地 图 level 读 取 时 如 果 是 4 
(工人 值 为 4)， 则 per_position 记录 当前 位 置 。 游 戏 中 为 了 达到 清 屏 效果 ， 每 次 工人 移动 后 
重 画 屏幕 前 ， 用 通道 重 画 整 个 游戏 区 域 ， 相 当 于 清除 原 有 画面 后 再 绘制 新 的 图 案 。 

function InitMap () // 画 通道 ， 平 铺 方块 


{ 
for (var i =0;i<CurLevel.length;i++){ 
for (var j=0;j<CurLevel[i].length;j++){ 
Context .drawImage (block, w*i,h*j,w,h); 
} 
} 
} 
function DrawMap (level) // 画 箱子 、 墙 、 人 物 、 目 的 地 
{ 
//context.clearRect (0 ，0 , w*l6 , h*16 ) 7 
InitMap () 7 // 画 通道 ， 平 铺 方块 
for (i=0;i<level.length;i++) // 行 号 
{ 


for (j=0;j<level [i] .length;j++)// 列 号 
{ 
var pic=block; 
switch (level [i] [j]) 
{ 
case 0: // 通 道 
pic=block; 
break; 
case 1: // 墙 
pic=wall; 
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3. 按键 事件 处 理 

游戏 中 对 用 户 的 按键 操作 ， 采 用 Canvas 对 象 的 KeyPress 按键 事件 来 处 理 。KeyPress 
按键 处 理 函数 DoKeyDown(evenb 根 据 用 户 的 按键 消息 , 计算 出 工人 移动 趋势 方向 前 两 个 方 
格 位 置 坐标 p1，p2， 将 所 有 位 置 作 为 参数 调用 TryGo(p1,p2) 方 法 判断 并 进行 地 图 更 新 。 
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function go (dir) // 按 键 处 理 
t 
var pl ,p2; // 分 别 代表 工人 移动 趋势 方向 前 两 个 方 格 
switch (dir)// 分 析 按 键 消 息 
{ 
case "left":// 向 左 
curMan = pleft; // 人 物 图 片 为 向 左 走 的 图 片 
pl=new Point (Per position.x-l1,per position.y); 
Pp2=new Point (per position.x-2,per position.y); 
break; 
case "right":// 向 右 
curMan = pright; // 人 物 图 片 为 向 右 走 的 图 片 
pl=new Point (per position.x+l,per position.y); 
P2=new Point (Per position.x+2,per position.y); 
break; 
case "up":// 向 上 
curMan=pup; // 人 物 图 片 为 向 上 走 的 图 片 
pl=new Point (Per position.x,per position.y-1); 
P2=new Point (Per position.x,per position.y-2); 
break; 
case "down":// 向 下 
curMan = pdown; // 人 物 图 片 为 向 下 走 的 图 片 
pl=new Point (Per position.x,per position.y+1); 
P2=new Point (Per position.x,per position.y+2); 
break; 
} 
if (TryGo (pl1,p2) ) // 如 果 能 够 移动 
{ 
this.MoveTimes++;// 次 数 加 1 
showMoveInfo () ; // 显 示 移动 次 数 信息 
} 
DrawMap (curMap); 
if (CheckFinish()) 
{ 
alert (" 恭 喜 过 关 。") ; 
NextLevel (1) ; // 开 始 下 一 关 


} 
TryGo(p1,p2) 方 法 是 最 复杂 的 部 分 ， 实 现 前 面 所 分 析 的 所 有 的 规则 和 对 应 算法 。 


function TryGo (pl,p2) // 判 断 是 否 可 以 移动 
{ 
//# 判 断 是 否 在 游戏 区 域 
if(pl.x<0) return false; 
if(pl.y<0) return false; 
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if(pl.y>=curMap.length) return false; 
if (pl.x>=curMap[0] .length) return false; 


if (curMap[pl.y] [pl.x]==1) return false;// 如 果 是 墙 ， 不 能 通行 
if (curMap [pl.y] [pl1.x]==3 | 1curMap [pl.y] [pl1.x]==5) // 如 果 是 箱子 ， 继 续 判断 前 一 格 
{ 
if (curMap[p2.y] [p2.x]==1 || curMap[p2.y] [p2.x]==3 || 
curMap[p2.y] [p2.x]==5) // 前 一 格 如 果 是 墙 或 箱子 都 不 能 前 进 
return false; 
if (curMap[p2.y] [bp2.x] 一 011curMap [p2.y] [p2.x] 王 2) // 如 果 P2 为 通道 或 者 目的 地 
oldMap = copyArray (curMap); // 记 录 现 在 地 图 
// 箱 子 前 进 一 格 
CurMap [p2.Y] [p2.x]=3; 
// 如 果 原 始 地 图 是 目的 地 或 者 是 放 到 目的 地 的 箱子 
if (CurLevel [p2.y] [p2.x]==2 |1CurLevel [p2.y] [p2.x]==5) 
curMap[p2.y] [p2.x]=5; 


} 
canReDo = true; 
// 工 人 前 进 一 格 
curMap[pl.y] [pl .x]=4; 
// 以 下 处 理工 人 原来 位 置 是 显示 目的 地 还 是 通道 平地 
Var V=CurLevel [per position.y] [per position.x];// 获 取 工 人 原来 位 置 原始 地 图 信息 
if (v==21| v==5) // 如 果 原 来 是 目的 地 
curMap [per position.y] [per position.x]=2 
else 
curMap [per position.y] [per position.x]=0;// 显 示 通 道 平 地 


per position=pl1;// 记 录 位 置 
return true; 
} 


CheckFinishO 判 断 是 否 完成 本 关 。 如 果 原 始 地 图 目标 位 置 上 没 放 箱子 〈 也 就 是 此 位 置 
不 是 放 到 目的 地 的 箱子 curMapfil[j]!=5)， 则 表明 有 没 放 好 的 箱子 ， 游 戏 还 未 过 关 ， 否 则 
function CheckFinish () // 验 证 是 否 过 关 
{ 
for(var i=0;i<curMap.length;i++) // 行 号 
for (var j=0;j<curMap[i] .length;j++)// 列 号 
{ // 如 果 原 始 地 图 的 目标 位 置 上 没 放 箱子 ， 则 还 没 结束 
if (CurLevel [i] [j]==2 && curMap[i] [j]!=5 || CurLevel [i][j]==5 && 
curMap[i] [j]!=5) 
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return false; 


} 
return true; 
} 


4. 显示 帮助 信息 


Var showHelp=false; 
function DoHelp () 
{ 
showHelp=!showHelp; 
if (showHelp) 
{ 
msg.innerHTML=" 用 键盘 的 上 、 下 、 左 、 右 键 移动 小 人 ， 把 箱子 全 部 推 到 小 球 的 位 置 
即 可 过 关 。 箱 子 只 可 向 前 推 ， 不 能 往 后 拉 ， 并 且 小 人 一 次 只 能 推动 一 个 箱子 。"; 
} 
else 
showMoveInfo(); 
} 
function showMoveInfo() 
{ 
msg .innerHTML=" 第 "+ (iCurLevel+1)+" 关 移动 次 数 : "+MoveTimes; 
showHelp=false; 
} 
5. 撤销 功能 
游戏 中 oldMap 保存 每 次 移动 前 的 地 图 信息 , 执行 撤销 就 是 把 oldMap 恢复 到 当前 地 图 
curMap 中 。 同 时 根据 地 图 中 记录 的 信息 找到 工人 位 置 ， 修 改 per position 记录 的 工人 位 置 
信息 ， 最 后 重新 绘制 整个 游戏 屏幕 就 可 以 恢复 到 上 一 步 的 状态 。 
Var canReDo = false; 
function Redo() { // 撤 销 功 能 
if (canReDo == false)// 不 能 撤销 
return; 


// 恢 复 上 次 地 图 
curMap = copyArray (oldMap); 





for (var i = 0; i < curMap.length; i++)// 行 号 
{ 
for (var j = 0; j < curMap[i].length; j++)// 列 号 
|i 
if (curMap[i][j] == 4)// 如 果 此 处 是 工人 
上 
per position = new Point (j,i); 





6. 选 关 功 能 

游戏 中 有 “上 一 关 ”“ 下 一 关 ”“ 重 玩 本 关 ” 三 个 选 关 功能 ， 这 三 个 选 关 功能 实现 方法 
是 一 样 的。 参数 i 如果 是 1， 则 是 “下 一 关 ” 参数 i 如果 是 -1， 则 是 “上 一 关 ” 参数 i 如 
果 是 0， 则 是 “ 重 玩 本 关 ”。 主 要 根据 关卡 号 iCurLevel， 调 用 initLevel0 初 始 化 本 关 地 图 ， 
并 在 屏幕 上 画 出 箱子 、 墙 、 人 物 、 目 的 地 信息 。 





至 此 就 完成 经 典 的 推 箱子 游戏 。 








[0 台 “五子 棋 游戏 简介 

五 子 棋 是 一 种 家 喻 户 晓 的 棋 类 游戏 ， 它 的 多 变 吸 引 了 无 数 的 玩家 。 本 章 首先 实现 单机 
五 子 棋 游戏 〈 两 人 轮流 下 )， 而 后 改进 为 人 机 对 战 版 。 整 个 游戏 棋盘 为 15X15， 单 击 鼠 标 
落 子 ， 黑 子 先 落 。 在 每 次 下 棋子 前 ， 程 序 先 判断 该 处 有 无 棋子 ， 有 则 不 能 落 子 ， 超 出 边界 
不 能 落 子 。 任 何 一 方 有 达到 横向 、 竖 向 、 斜 向 、 反 和 斜 向 连 到 5 个 棋子 则 胜利 。 本 章 五 子 棋 
游戏 运行 界面 如 图 10-1 所 示 。 


RE ©p-cl 











图 10-1 五 子 棋 游戏 运行 界面 


区 加 五 子 棋 游戏 的 设计 思想 | 


在 下 棋 过 程 中 ， 为 了 保存 下 过 的 棋子 的 信息 ， 使 用 数组 chessData。chessData[x][y] 存 
储 棋 盘 〈x，y) 处 棋子 信息 ，1 代表 黑子 ，2 代表 白 子 ，0 为 无 棋子 。 
整个 游戏 运行 时 ， 在 鼠标 单 击 事件 中 判断 单 击 位 置 是 否 合法 ， 既 不 能 在 已 有 棋 的 位 置 


单 击 ， 也 不 能 超出 游戏 棋盘 边界 ， 如 果 合 法 则 将 此 位 置信 息 加 入 到 chessData， 同 时 调 上 


Judge(x, y, 


? 10.3.1 
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chess) 判 断 游 戏 的 输赢 。 


关键 技术 
判断 输赢 的 算法 


本 游戏 关键 技术 是 判断 输赢 的 算法 。 对 于 算法 具体 实现 大 致 分 为 以 下 几 个 部 分 : 


。 尖 


。 判 
以 上 


断 X=Y 轴 上 是 否 形成 五 子 连珠 ; 

断 X=-Y 轴 上 是 否 形成 五 子 连珠 ; 

断 义 轴 上 是 否 形成 五 子 连珠 ; 

断 Y 轴 上 是 否 形成 五 子 连珠 。 

4 种 情况 只 要 任何 一 种 成 立 ， 那 么 就 可 以 判断 输赢 。 


判断 输赢 实际 上 不 用 扫描 整个 棋盘 ， 如 果 能 得 到 刚 下 的 棋子 位 置 (x, y)， 就 不 用 扫描 整 


个 棋盘 ， 


看 仅仅 在 此 棋子 附近 横竖 斜 方向 均 判 断 一 遍 即 可 。 


judge(x, y chess) 判 断 这 个 棋子 是 否 和 其 他 的 棋子 连 成 五 子 即 输赢 判断 。 它 是 以 (x,y) 


为 中 心 横 
以 水 


问 、 纵 向 、 斜 方向 的 判断 并 统计 相同 个 数 来 实现 的 。 
平方 向 (横向 判断 为 例 ， 以 (x, y) 为 中 心计 算 水 平方 向 棋子 数量 时 ， 首 先 向 左 统 





计 ， 相 同 则 countl 加 1。 然 后 向 右 统 计 ， 相 同 则 countl 加 1。 统 计 完 成 后 如 果 count1>=5 
则 说 明 水 平方 向 连 成 五 子 ， 其 他 方向 同 理 。 
function judge (x，Y，chess) {// 判 断 该 局 棋盘 是 否 赢 了 


var countl = 0; // 保 存 共有 多 少 相同 的 颜色 棋子 相连 
var count2 = 0; 
var count3 = 0; 
var count4 = 0; 


// 左 右 判断 ， 横 向 的 判断 
// 判 断 横 向 是 否 有 5 个 棋子 相连 ， 特 点 是 纵 坐 标 相 同 ， 即 chessData[x] [Y] 中 y 值 是 相同 的 
for (var i = x; i >= 0; i--) {  // 向 左 统计 


} 


if (chessData[li][y] != chess) { 
break; 

} 

Count1++7 


for (var 二 =xX+ 1; 主 < 15; i++ {// 向 右 统计 


if (chessData[i][y] != chess) { 
break; 

} 

Countl++; 


} 
// 上 下 判断 ， 纵 向 的 判断 


Tor (war 三 > 


if (chessData[x] [i] != chess) { 
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程序 中 judge(x, y, chess) 函 数 判断 4 种 情况 下 是 否 连 成 五 子 从 而 判断 出 输赢 。 本 程序 中 
每 下 一 步 棋子 ， 调 用 judge(x, y, chess) 函数 判断 是 否 已 经 连 成 五 子 ， 如 果 已 经 连 成 五 子 ， 
显示 输赢 结果 对 话 框 。 
“10.3.2 图形 上 色 


如 果 我 们 想 要 纤 从 图 形 上 色 ,， 有 两 个 重要 的 属性 可 以 做 到 : fillStyle 和 strokeStyle。 

fillStyle = color 

strokeStyle = color 

strokeStyle 是 用 于 设置 图 形 轮廓 的 颜色 ， 而 flStyle 用 于 设置 填充 颜色 。color 可 以 
是 表示 CSS 颜色 值 的 字符 串 、 渐 变 对 象 或 者 图 案 对 象 。 默 认 情 况 下 ， 线 条 和 填充 颜色 都 
是 黑色 (CSS 颜色 值 #000000)。 

下 面 的 例子 都 表示 同一 种 颜色 。 


// 这 些 fillstyle 的 值 均 为 橙色， 
Ctx.fil1Style = "orange"; 
ctx.fillStyle = "#FFAS500"; 
ctx.fillstyle = "rgb(255,165,0)"; 
ctx.fillstyle = "rgba(255,165,0,1)"; 


本 游戏 中 棋盘 的 背景 色 即 是 采 用 “orange”: 





context .fillstyle = "orange"; 
context .fillRect (0,0,640,640); 


区 如 程序 设计 的 步 又 


? ‘10. 4. 1 游戏 页 面 fi html Nt TT 
是 页 面 加 载 <body onload-"drawRectO' 吃 调 用 drawRect0 绘 币 | 棋 盘 ， 






游戏 页 面 很 简单 ， 


从 而 开始 游戏 。 

</head> 

<body onload="drawRect () "> 

<div> 

<canvas width="640" id="canvas" onmousedown="play (event)" height="640"> 
</canvas> 

</div> 

</body> 

</html> 
! ED 和 

.初始 化 棋盘 数组 

a 子 图 片 对 象 img_b 和 img_w, 初始 化 棋盘 数组 chessData, 其 值 0 为 没有 走 

过 的 ，1 为 白 棋 走 的 ，2 为 黑 棋 走 的 ， 所 以 最 初 都 是 0。 


<script type="text/javascript"> 
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Var Canvas; 
Var context; 
var isWhite = false;// 设 置 是 否 该 轮 到 白 棋 
var isWell = falsez// 设 置 该 局 棋盘 是 否 赢 了 ， 如 果 赢 了 就 不 能 再 走 了 
Var img b = new Image(); 
img b.src = "images/w.png";// 白 棋 图 片 
Var img WwW = new Image(); 
img Ww.src = "images/b.png";// 黑 棋 图 片 
var chessData = new Rrray(15) ;// 这 个 为 棋盘 的 二 维 数组 ， 用 来 保存 棋 极 信息 
// 初 始 化 0 为 没有 走 过 的 ，1 为 白 棋 走 的 ，2 为 黑 棋 走 的 
For (var R= 0 Ee LI Ey 

chessData[x] = new Array(15); 

for (var y= Or YY < LIF Vrh) 

chessData[x] [y] = 0; 


} 


2. 绘制 棋盘 
页 面 加 载 完 毕 时 调用 drawRect0 函 数 ， 在 页 面 上 绘制 15X15 五 子 棋 棋 盘 。 


function drawRect () {// 页 面 加 载 完毕 调用 函数 ， 页 面 上 绘制 五 子 棋 棋 盘 
canvas = document .getElementById("canvas"); 
Context = canVas .getContext ("2d"); 
context .fillstyle = "orange"; 
context .fillRect (0,0,640,640); 
context .fillstyle = "#000000"; 
for (var i = 0; i <= 640; i += 40) {// 绘 制 棋盘 的 线 

context .beginPath (); 
context .moveTo (0, i); 
context.lineTo(640, i); 
Context .closePath (); 
context.stroke (); 
context .beginPath (); 
context .moveTo (i, 0); 
context.lineTo(i, 640); 
context.closePath(); 
context.stroke(); 


} 


3. 走 棋 函数 

鼠标 单 击 事件 中 判断 单 击 位 置 是 否 合法 ， 既 不 能 在 已 有 棋 的 位 置 单 击 ， 也 不 能 超出 游 
戏 棋盘 边界 ， 如 果 合 法 则 将 此 位 置信 息 记录 到 chessData (数组 ) 中 ， 最 后 是 本 游戏 关键 输 
赢 判 断 。 程 序 中 调用 judge(x, y, chess) 函 数 判 断 输 赢 。 判 断 4 种 情况 下 是 否 连 成 五 子 ， 得 出 


谁 赢 。 











function play(e) {// 鼠 标 单 击 时 发 生 
// 从 像素 坐标 换算 成 棋盘 坐标 
// 计 算 鼠 标 单 击 的 位 置 ， 如 果 单 击 (65，65) 位 置 ， 那 么 就 是 棋盘 (1，1) 的 位 置 
var x = parseInt((e.clientX - 20) / 40); 





var y = parseInt((e.clientY - 20) / 40); 

if (chessData[x][Y] != 0) {// 判 断 该 位 置 是 否 被 下 过 了 
alert ("你 不 能 在 这 个 位 置 下 棋 ") ; 
return; 

} 

if (isWwhite) { // 是 否 是 白 棋 
iswhite = false; // 换 下 一 方 走 棋 
drawChess (1，x，y);// 绘 制 白 棋 

和 

La 
isWhite = true; ”// 换 下 一 方 走 棋 
drawChess (2，x,，y);// 绘 制 黑 棋 


} 


4. 画 棋子 函数 
drawChess(chess, x, y) 函 数 中 参数 chess 为 棋 (1 为 白 棋 ，2 为 黑 棋 )，(x, y) 为 棋盘 即 
数组 位 置 。 


function drawChess (chess, x,y) {// 参 数 chess 为 棋 (1 为 白 棋 ，2 为 黑 棋 )，x， Y 为 数组 位 置 
if (isWell == true) { 
alert (" 已 经 结束 了 ， 如 果 需 要 重新 玩 ， 请 刷新 ") ; 


return; 


if (x >= 0 && x <15 && y >=0 gg&y<15) 1{ 
if (chess == 1) { 
context .drawImage (img w, x * 40 + 20, y * 40 + 20);// 绘 制 白 棋 
chessDatal[lx] [y] = 1; 
} 
else { 
context .drawImage (img b, x * 40 + 20，Y * 40 + 20); // 绘 制 黑 棋 


chessData[x] [y] = 2; 
} 
judge (x, y, chess); 


} 


罗 且 人 机 五 子 棋 游 戏 的 开发 


前 面 开发 的 五 子 棋 游 戏 仅仅 能 够 实现 两 个 人 轮流 下 棋 ， 如 果 改 进 成 人 机 五 子 棋 对 弈 则 
比较 具有 挑战 性 。 人 机 五 子 棋 对 弈 需要 人 工 智能 技术 ， 棋 类 游戏 实现 人 工 智 能 的 算法 通常 
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有 以 下 三 种 。 
1. 遍历 式 算 法 
这 种 算法 的 原理 是 : 按照 游戏 规则 ， 遍 历 当前 棋盘 布局 中 所 有 可 以 下 棋 的 位 置 ， 然 后 
假设 在 第 一 个 位 置 下 棋 ， 得 到 新 的 棋盘 布局 ， 再 进一步 遍历 新 的 棋盘 布局 。 如 果 遍 历 到 最 
后 也 不 能 战胜 对 手 ， 则 退回 到 最 初 的 棋盘 布局 ， 重 新 假设 在 第 二 个 位 置 下 棋 ， 继 续 遍 历 新 
的 棋盘 布局 ， 这 样 反 复 地 遍历 ， 直 到 找到 能 最 终 战胜 对 手 的 位 置 。 这 种 算法 可 使 电脑 棋艺 
非常 高 ， 每 一 步 都 能 找 出 最 关键 的 位 置 。 然 而 这 种 算法 的 计算 量 非常 大 ， 对 CPU 的 要 求 
很 高 。 

2. 思考 式 算法 

这 种 算法 的 原理 是 : 事先 设计 一 系列 的 判断 条 件 ， 根 据 这 些 判断 条 件 遍历 棋盘 ， 选 择 
最 佳 的 下 棋 位 置 。 这 种 算法 的 程序 往往 比较 复杂 而 且 只 有 本 身 棋 艺 很 高 的 程序 员 才 能 制作 
出 “高 智商 的 电脑 ”。 

3. 棋谱 式 算法 

这 种 算法 的 原理 是 : 事先 将 常见 的 棋盘 局 部 布局 存储 成 棋谱 ， 然 后 在 走 棋 之 前 只 对 棋 
得 进行 一 次 遍历 ,依照 棋谱 选择 关键 的 位 置 。 这 种 算法 的 程序 思路 清晰 , 计算 量 相 对 较 小 ， 
而 且 只 要 棋谱 足够 多 ， 也 可 以 使 电脑 的 棋艺 达到 一 定 的 高 度 。 

本 实例 采用 棋谱 式 算法 ， 实 现 人 工 智能 。 为 此 设计 Computer 类 ， 实 现 电脑 ( 白 方 》 
落 子 位 置 的 计算 ， 首 先 使 用 数组 Chess 存储 棋谱 ， 形 式 如 下 : 黑 棋 (B)， 白 棋 C(W)， 无 棋 
(N)， 需 要 下 棋 位 置 (S)。 


// 一 个 棋子 的 情况 
[ N, N, NS B ]， 





// 两 个 棋子 的 情况 





// 三 个 棋子 的 情况 
NA SMB7 Be Bp TID 
BR By BS 
LS BR RS 二 
NBLSAOB BP 
了 BSA Be MN ly 
en 
WW We Sy Nl 
Na WW Wl 
NO WS Ww wl 
We WS WN 

// 四 个 棋子 的 情况 

Sn DB BI 
BS Bl 
Br B59 By Bd 

LB B, Br SS; BOs 


[BB Br BS ly 
LS Wo Wo WM We 
I WM Wl 
Se 0 0 0 
bE We We We By Wl 
LW WN Nl 





数组 中 行 数 越 高 ， 表 明 该 行 棋谱 中 S 位 置 越 重要 ， 电 脑 走 最 重要 的 位 置 。 

例如 ;棋谱 [N,S,B,B,B ] 表 示 玩 家 (人 ) 的 黑 棋 (B) 已 有 三 子 连 线 了 ， 电 脑 必须 在 此 
附近 下 棋 , 其 中 S 为 需要 电脑 下 子 的 位 置 , N 为 空位 置 。 棋谱 [S, B, B, B, B ] 表 示 玩 家 (人 ) 
的 黑 棋 (B) 已 有 四 子 连 线 了 。 当 然 棋 谱 [S, B, B, B, B ] 级 别 高 于 棋谱 [N,S,B,B,B ]。 

有 了 棋谱 后 就 是 遍历 棋盘 的 信息 是 否 符合 某 个 棋谱 ,判断 时 从 级 别 高 的 棋谱 判断 到 级 
别 低 的 棋谱 ( 即 从 数组 中 行 数 最 高 Chess.length-1 开始 判断 )。 如 果 符 合 某 个 棋谱 ， 则 按 棋 
谱 指定 的 位 置 存储 到 (m_nCurRow，m_nCurCol)， 如 果 所 有 棋谱 都 不 符合 ， 则 随便 找 一 个 
空位 置 。 

实现 人 工 智能 的 算法 的 coputerjs 脚本 如 下 : 

Var KONG = 0;// 空 位 置 KONG 

Var BLACK = 2;// 黑 色 棋子 

var WHITE = 1;// 白 色 棋 子 

var N = 0;// 空 位 置 

var B = 2;// 有 黑色 棋子 (人 的 棋 

var W = 1;// 有 白色 棋子 (电脑 的 棋 》 

var S = 3;// 需 要 下 子 的 位 置 














// 数 组 chess 存储 棋谱 

var Chess, = | 
// 一 个 棋子 的 情况 
| i. Bae Ne Sr Bl 
| SN MN: Hl 
LN Nr Ne S77 Bl 
I BA Sr Nod js 
| Nr Br DB Nl 
| No Bn Sr Nl 
EP Mz Me NM Sr Wy 
WL Sy rn 
| WN “Sn Wl 
EM WS 
Lo Me M3 Wa 
[ N, N, W, SsS, N], 
// 两 个 棋子 的 情况 
i Br By Sr Nr Nl 
LI NM NM SS, B, Bl 
下 
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// 电 脑 根据 输入 参数 grid (棋盘 )， 计 算出 落 子 位 置 (m nCurRow,，m nCurCol) 
function Input(grid){//grid 是 Array 
Var rowSel,colSel,nLevel; 


Var index,nLevel; 


和 WP 
m nCurcol = -1;// 存 储 临时 的 选择 位 置 
m nCurRow = -1; 


nLevel = -1;// 存 储 临时 选择 的 棋谱 级 别 
var bFind;// 是 否 符合 棋谱 的 标志 


for (var row = 0; row < 15; row ++) 


{// 人 遍历 棋盘 的 所 有 行 
for (var col = 0; Col < 15; COL ++) 
{// 遍 历 棋 盘 的 所 有 列 
for (var i = Chess.length - 1; i >= 0; i --) 
{// 遍 历 所 有 级 别 的 棋谱 


// 查 看 从 当前 棋子 开始 的 横向 五 个 棋子 是 否 符合 该 级 别 的 棋谱 
EE COL tL 
4 
rowSel = -1; 
colSel = -1; 
bFind = true; 
Eor Tt I On I Dr 
{ 
index = grid[col + j] [row]; 
if ( index == KONG ) 
{// 如 果 该 位 置 没 有 棋子 ， 对 应 的 棋谱 位 置 上 只 能 是 Ss 或 N 
if (Chess[i][j] == S) 
{// 如 果 是 S， 则 保存 位 置 
rowSel = row; 
colSel = col + j; 
} 
else if ( Chess[i][j] != N) 
{// 不 是 s 也 不 是 N， 则 不 符合 这 个 棋谱 ， 结 束 循环 
bFind = false; 
break; 


} 
if ( index == BLACK && Chess[i][j] != B) 
{// 如 果 是 黑色 棋 ， 对 应 的 棋谱 位 置 上 应 是 B， 否 则 结束 循环 
bFind = false; 
break; 
} 
if ( index == WHITE && Chess[i][j] != W) 
{// 如 果 是 白色 棋 ， 对 应 的 棋谱 位 置 上 应 是 W， 否 则 结束 循环 
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} 
二 下 二 


bFind && i > nLevel ) 


{// 如 果 符合 此 棋谱 ， 且 该 棋谱 比 上 次 找到 的 棋谱 的 级 别 高 


nLevel 
m nCurCol 
m nCurRow 


i; // 保 存 级 别 
colSel; // 保 存 位 置 


= rowSel; 


break; // 遍 历 其 他 级 别 的 棋谱 


1 


// 斜 135 度 的 五 个 棋子 


TOoWS 
cols 


if (COL 4 < 5 Ct TOW TE 4 < "L150) 

{// 查 看 从 当前 棋子 开始 的 斜 135 度 向 下 的 五 个 棋子 是 否 符合 该 级 别 棋谱 
el = -1; 
el = -1; 


bFind = true; 


for 
{ 


} 


( ="0N J < 5 J et) 


index = grid[col + j] [row + j]; 
if ( index == KONG ) 
{// 如 果 该 位 置 没 有 棋子 ， 对 应 的 棋谱 位 置 上 只 能 是 Ss 或 N 
if (Chess[i][j] == S) 
{// 如 果 是 S， 则 保存 位 置 
rowSel row + j; 
colSsel 


col + j; 

} 

else if ( Chess[i][j] !=N) 

{// 不 是 s 也 不 是 N， 则 不 符合 这 个 棋谱 ， 结 束 循环 
bFind = false; 
break; 


} 

if ( index == BLACK && Chess[i][j] != B) 

{// 如 果 是 黑色 棋 ， 对 应 的 棋谱 位 置 上 应 是 B， 否 则 结束 循环 
bFind = false; 
break; 

} 

if ( index == WHITE && Chess[i][j] != WwW) 

{// 如 果 是 白色 棋 ， 对 应 的 棋谱 位 置 上 应 是 W， 否 则 结束 循环 
bFind = false; 


break; 


if ( bFind && i > nLevel ) 
{// 如 果 符合 此 棋谱 ， 且 该 棋谱 比 上 次 找到 的 棋谱 的 级 别 高 


nLevel = i;// 保 存 级 别 
m nCurCol = colSel;// 保 存 位 置 
m nCurRow = rowSel; 


break; // 遍 历 其 他 级 别 的 棋谱 


} 

下 

if ( m nCurRow != -1 ) 

{// 如 果 选 择 了 一 个 最 佳 位 置 
grid[m nCurCol] [m nCurRow]= WHITE ; 
return trues 


} 
// 如 果 所 有 棋谱 都 不 符合 , 则 随便 找 一 个 空位 置 
whijile (true) 
{ 
Var col; 
Var row; 
col=int (Math.random()*15); // 随 便 找 一 个 位 置 
row=int (Math.random()*15); 
if (grid[col] [row] == KONG) 
{ 
grid[col] [row] = WHITE ; 
m nCurCol = col; 
m nCurRow = row; 
return true; 


} 
return false; 
} 


在 游戏 页 面 five.html 中 ， 由 于 使 用 上 面 coputerjs 脚本 ， 所 以 需要 在 <body> 中 添加 : 

<script type="text/Javascript" src="computer.js"></script> 

由 于 只 有 玩家 (b 棋 ) 需要 单 击 棋盘 落 子 ， 不 再 轮流 下 子 ， 所 以 对 单 击 事件 响应 函数 
play(e) 进 行 修改 ， 玩 家 〈 黑 棋 ) 落 子 后 ， 判 断 此 时 玩家 〈 黑 棋 ) 是 否 赢 了 。 如 果 赢 了 则 游 
戏 结束 , 否则 直接 电脑 ( 白 方 ) 自动 计算 落 子 , 电脑 ( 白 方 ) 自动 沙子 是 调用 Input(chessData) 
实现 计算 白 子 位 置 ，GetComputerPos() 获 取 电 脑 落 子 位 置 P， 获取 电 脑 落 子 位 置 后 ， 在 位 置 
P 显示 白 子 并 判断 此 时 电脑 是 否 赢 了 。 


function play(e) {// 鼠 标 单 击 时 发 生 
var x = parseInt((e.clientx - 20) / 40);// 计 算 鼠 标 单 击 的 区 域 


Var y = parseInt((e.clientyY - 20) / 40); 


if (chessData[x][y] != 0) {// 判 断 该 位 置 是 否 被 下 过 了 
alert ("你 不 能 在 这 个 位 置 下 棋 ") ; 
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return; 


} 

drawChess (2, x, y); 

// 轮 到 电脑 《 白 方 ) 走 

Input (ChessData) 

Var p=GetComputerPos () ;// 获 取 电 脑 落 子 位 置 P 


drawChess (1,p.x,p-.y); 
} 
本 文 实现 经 典 的 五 子 棋 游戏 的 基本 功能 ， 并 且 能 够 判断 输赢 ， 并 把 系统 改进 成 人 机 对 
战 版 ， 使 得 游戏 更 具 挑战 性 ， 从 而 更 吸引 玩家 。 
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黑白 棋 游 戏 





于 加 黑白 棋 游 戏 介 绍 


黑白 棋 ， 又 叫 反 棋 (Reversi)、 奥 赛 罗 棋 (Othello)、 苹 果 棋 、 翻 转 棋 。 黑 白 棋 在 西方 
和 日 本 很 流行 。 游 戏 通过 相互 翻转 对 方 的 棋子 ， 最 后 以 棋盘 上 谁 的 棋子 多 来 判断 胜 负 。 黑 
白 棋 的 棋盘 是 一 个 有 8X8 方 格 的 棋盘 。 开 始 时 在 棋盘 正中 有 两 白 两 黑 四 个 棋子 交叉 放置 ， 

下 子规 则 : 

把 自己 颜色 的 棋子 放 在 棋盘 的 空格 上 ， 而 当 自 己 放下 的 棋子 在 横 、 竖 、 斜 8 个 方向 内 
有 一 个 自己 的 棋子 ， 则 被 夹 在 中 间 的 全 部 翻转 成 为 自己 的 棋子 。 并 且 ， 只 有 在 可 以 翻转 棋 
子 的 地 方才 可 以 下 子 。 如 果 玩 家 在 棋盘 上 没有 地 方 可 以 下 子 ， 则 该 玩家 对 手 可 以 连 下 。 

胜 负 判定 条 件 : 

双方 都 没有 棋子 可 以 下 时 棋局 结束 ， 以 棋子 数目 来 计算 胜 负 ， 棋 子 多 的 一 方 获胜 。 

在 棋盘 还 没有 下 满 时 ， 如 果 一 方 的 棋子 已 经 被 对 方 吃 光 ， 则 棋局 也 结束 。 将 对 手 棋子 
吃 光 的 一 方 获胜 。 

本 章 开 发 黑白 棋 游 戏 程序 。 游 戏 运行 界面 如 图 11-1 所 示 。 该 游戏 具有 显示 执 棋 方 可 以 
落 棋子 的 位 置 提 示 功 能 和 判断 胜 负 功 能 。 在 游戏 过 程 中 ， 单 击 “ 帮 助 ” 按 钮 则 显示 执 棋 方 
可 落 子 位 置 〈 图 片 国 表 示 可 落 子 位 置 ， 如 图 11-2 所 示 )。 

ee i 




















图 11-1 黑白 棋 游 戏 运行 界面 
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图 11-2 ii 图 片 表示 执 棋 方 〈 黑 方 ) 可 落 子 位置 


黑白 棋 游戏 设计 的 思路 


? ?1 2. 1 . 棋 六 和 棋盘 ts nn 


游戏 开发 时 ， 需要 事先 准备 黑白 两 色 棋子 和 棋盘 图 片 (如 图 113 所 示 )。 ,游戏 最 初 灵 
示 时 ， 棋 盘 上 画 上 4 个 棋子 。 这 里 为 了 便于 处 理 ， 采 用 一 个 qizi 二 维 数组 用 来 存储 棋盘 上 


的 棋子 。 
| 
Oo OO 














BlackStone, .png @ qipanljpg WhiteStone.png 


图 11-3 黑白 两 色 棋子 和 棋盘 





?11.2.2 翻转 对 方 的 棋子 


需要 从 自己 落 子 (x1，y1) 为 中 心 的 横 、 竖 、 斜 8 个 方向 上 判断 是 否 需 要 翻转 对 方 的 
子 , 程序 中 由 鼠标 的 mousedown 事件 实现 。 在 mousedown 事件 中 参数 event 对 和 象 含有 单 
击 位 置 像素 坐标 (event.pageX， event.pageY), 处 理 后 变 成 Canvas 对 象 内 像素 坐标 (x, y)。 






































再 由 如 下 公式 换算 : 


xl = Math.round((x - 40) / 80); //Math.round 四 舍 五 入 
yl = Math.round((x - 40) / 80); 


经 过 换算 转换 为 棋盘 坐标 (x1，y1)。 

最 后 从 左 、 左上、 上 、 右 上 、 右 、 右 下 、 下 、 左 下 8 个 方向 上 调用 过 程 DirectReverse(x1, 
yl, dx, dy) 翻 转 对 方 的 棋子 。 而 具体 棋子 的 翻转 由 FanQi(x, y) 实 现 。 FanQi(x, y) 修 改 数组 qizi 
的 (x, y) 保 存 棋盘 上 的 棋子 信息 。 
































function FanQi(x, y) { 
if (qizi[x][y] == BLACK) { 
qizi[x] [y] = WHITE; 
} 
else { 
qizi[x] [y] = BLACK; 
} 
} 


We 








Can_go(x1，yl) 从 左 、 左 上 、 上 J 有 、 有 下 、 下 、 大 下 8 8 个 方向 下 调用 函数 
CheckDirect(x1, yl, dx, dy) 判 断 某 方 向 J 上 是 否 形成 夹击 之 势 ， 如 果 形 成 且 中 间 无 空子 则 返回 
True， 表 示 (x1，y1) 可 以 落 子 ，(x1，y1) 处 可 以 落 子 则 用 辆 图 片 显 示 。 


















qizi[][] 二 维 数组 保存 棋盘 上 的 棋子 人 其 中 元 素 保存 1， 表 示 此 处 为 黑子 ， 元 ; 
存 2， 表 示 此 处 为 白 子 ， 元 素 保存 0， 表 示 此 处 为 无 棋子 。 通 过 对 qizi 数组 中 各 方 棋子 数 
的 统计 ， 在 棋盘 无 处 可 下 时 ， 根 据 各 方 棋子 数 判断 出 输赢 。 


关键 技术 


?11.3.1 Canvas 对 象 支持 的 JavaScript 的 鼠标 事件 
的 JavaScript 的 鼠标 事件 ， 包 括 鼠 标 单 击 (MouseClick)、 








Canvas 对 象 支持 所 有 
下 (Mouse Down)、 鼠 标 抬 起 (Mouse Up) 和 鼠标 移动 (Mouse Move)。 对 Canvas 添加 鼠 
标 事件 方式 有 两 种 ， 一 种 方式 如 下 : 


// mouse event 
canvas.addEventListener ("mousedown",doMouseDown, false); 
canvas.addEventListener('mousemove', doMouseMove, false); 


canvas.addEventListener('mouseup', doMouseUp, false); 


另外 一 种 方式 在 JavaScript 中 称 为 反 模式 : 





canvas .onmousedown = function(e){ 
} 
canvas.onmouseup = function(e){ 
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} 





canvas.onmousemove = function(e){ 


} 
? 11.3.2 




















于 Canvas 上 鼠标 事件 中 不 能 直接 获取 鼠标 在 Canvas 的 坐标 ， 所 获取 的 都 是 基于 整 








个 屏幕 的 坐标 。 所 以 通过 鼠标 事件 epageX 与 epageY 来 获取 鼠标 位 置 ， 然 后 通过 Canvas. 
getBoundingClientRect0 来 获取 Canvas 对 象 相 对 屏幕 的 相对 位 置 ， 通 过 计算 得 到 鼠标 在 
Canvas 中 的 坐标 ， 代 码 如 下 : 


function getPointOnCanvas (canvas, x, y) { 


var bbox =canvas.getBoundingClientRect (); 
return { x: X- bbox.left *(canvas.width / bbox.width), 


3 


Y:Y - bbox.top * (canvas.height / bbox.height) 


国耻 黑白 棋 游戏 设计 的 步骤 





<html> 
<head> 


<title> 黑 白 棋 </title> 


<meta 
<meta 
<meta 
<meta 
<meta 


http-equiv=content-type content="text/html; charset=utf-8"> 
name="Generator" content="EditPlus"> 

name="Author™” content=""> 

name="Keywords" content=""> 

name="Description" content=""> 


</head> 


<body 


onload="init ()" onkeydown="DoKeyDown (event)"> 


<canvas id="myCanvas" width="720" height="720"> 你 的 浏览 器 还 不 支持 哦 </canvas> 
<img id="whitestone" src="img/whitestone.png" style="display:none;"> 





blackstone" src="img/blackstone.png" style="display:none;"> 





<img id="qi panl" src="img/qi panl.jpg" style="display:none;"> 


<img id="Info2" src="img/Info2.png" style="display:none;"> 


<div 


id="message txt" style="text-align:center;border:lpx solid red; 


width:720pzx;height:20px;font-size:20px;"></div> 
<input type="button"” value=" 走 棋 提 示 " onclick="DoHelp()"> 
<script type="text/javascript" src="Main.js"></script> 
</body> 
</html> 
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“了 142 设计 脚本 (Mainjs) 





E 
游戏 中 常量 定义 ， 其 中 BLACK 黑 棋 为 1，WHITE 白 棋 为 2， 无 棋 为 0。 





< 
nD 
[ei 
: 
oa 
be 
外 
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Var WHITE 
Var KONG = 0; 
Var w=80; 


1 
DL 


Var h=80; 


以 下 获取 Canvas 对 象 ， 以 及 用 到 的 棋子 和 棋盘 图 片 、 提 示 图 片 。 


var qizi =new Array() ;// 构 造 一 个 qizi[][] 二 维 数组 用 来 存储 棋子 

var curQizi = BLACK;// 当前 走 棋 方 

Var mycanvas=document .getElementById('myCanvas'); 

Var context = mycanvas.getContext('2d"'); 

var whitestone=document .getElementById ("whitestone");// 白 棋 图 片 
var blackstone=document .getElementById ("blackstone");// 黑 棋 图 片 
var qipan=document .getElementById ("qi panl") 7;// 棋 盘 

var info=document .getElementById("Info2");// 提 示 图 形 

var message txt=document .getElementById("message txt");// 提 醒 文 字 


2. 初始 化 游戏 界面 
游戏 开始 时 ，initO 对 保存 棋盘 上 的 棋子 信息 的 qizi 数组 初始 化 ， 同 时 在 棋盘 上 显示 初 
始 的 4 个 棋子 。 


function init(){ 
initLevel () ;// 棋盘 上 初始 4 个 棋子 
showMoveInfo () ? // 当 前 走 棋 方 信息 
mycanvas .addEventListener ("mousedown", doMouseDown, false) 
function initLevel() { 
// 初 始 化 界面 
ar. T7137 
for (i=0; i<8; i#+) { 
qizi[i]=new Array(); 
for (j=0; j<8; j++) { 
qizi[i] [j]=KONG; 
} 
} 
// 棋盘 上 初始 4 个 棋子 
// 1 为 黑 ，2 为 白 ，0 为 无 棋子 
qizi[3][3] = WHITE; 
qizi[4] [4] = WHITE; 
qizi[3] [4] = BLACK; 
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qizi[4] [3] = BLACK7 
DrawMap () ; ”// 画 棋盘 和 所 有 棋子 
message txt.innerHTML = "该 黑 棋 走 子 "; 
} 
// 画 棋盘 和 所 有 棋子 
function DrawMap( ) 
1 


淖 





Context .clearRect ( 0 ，0 ,720 ，720) 7 
context .drawImage (qipan, 0,0,qipan.width,qipan.height); 
for (i=0;i<qizi.length;i++) // 行 号 
for (j=0;j<qizi[i] .length;j++) // 列 号 
i 
var pic; 
switch (qizi[i][j]) 
{ 


case KONG: //0 
break; 
case BLACK: Wa 


pic = blackstone; 

context.drawImage (pic, w * j, h * i, pic.width, pic.height); 
break; 
case WHITE: //2 

pic = whitestone; 

context.drawImage (pic, w * j, h * i, pic.width, pic.height); 


break; 
3 


} 
} 
} 
showMoveInfo() 显 示 轮 到 哪 方 走 棋 。 


function showMoveInfo(){ 
if (curQizi== BLACK)// 当前 走 棋 方 是 黑 棋 
message txt .innerHTML-" 该 黑 棋 走 子 "; 
else 
message txt.innerHTML=" 该 白 棋 走 子 "; 
} 


init0) 函 数 同时 对 canvas 添加 鼠标 单 击 事件 侦 听 ， 如 果 canvas 被 单 击 则 执行 
doMouseDown 函数 完成 走 棋 功 能 。 

3. 走 棋 过 程 

如 果 是 棋盘 被 单 击 ， 则 此 位 置 像 素 信息 〈eventpageX，eventpageY) 可 以 转换 成 棋盘 
坐标 (x1，y1)， 然 后 判断 当前 位 置 (x1，y1) 是 否 可 以 放 棋 子 〈 符 合 夹 角 之 势 )， 如 果 可 























以 则 此 位 置 显示 自己 的 棋子 图 形 ， 调 用 FanALLQi(Gi,j) 从 左 、 左 上 、 上 、 右 上 等 8 个 方向 翻 
转 对 方 的 棋 。 最 后 判断 对 方 是 否 有 棋 可 走 ， 如 果 对 方 可 以 走 棋 则 交换 走 棋 方 。 如 果 对 方 不 
可 以 走 棋 ， 则 自己 可 以 继续 走 棋 ， 直 到 双方 都 不 能 走 棋 ， 显 示 输 赢 信息 。 


function doMouseDown (event) { 














Var X = event .pagex; 
Var y = event .pageYy; 
var canvas = event.target; 
Var loc = getPointOnCanvas (canvas, x, y); 
console.1log ("mouse down at point (x:"+loc.x+", y:"+1l0oc.y+")"); 
clickQi (loc); 
} 
function getPointonCanvas (canvas, x, y) { 
var bbox = canvas.getBoundingClientRect (); 
return { x: x - bbox.left * (canvas.width / bbox.width), 
Y: Y - bbox.top * (canvas.height / bbox.height)}; 
} 
function clickQi (thisQi) { 
var xl, yl 
xl = Math.round( (thisQi.y - 40) / 80); 
yl = Math.round((thisQi.x - 40) / 80); //Math.round() 四 会 五 入 
if (Can go (xl1，y1)) {// 判断 当前 位 置 是 否 可 以 放 棋 子 


//trace ("Can") 7 


qizi[xl][y1] = curQizi; 
FanALLQi (x1，y1);// 从 左 、 左 上 、 上 、 右 上 、 右 、 右 下 、 下 、 左 下 方向 翻转 对 方 的 棋 
DrawMap (); 


// 判 断 对 方 是 否 有 棋 可 走 ， 如 有 交换 走 棋 方 

if (curQizi==WHITE &&checkNext (BLACK) | |curQizi==BLACK &&checkNext (WHITE) ) { 
if (curQizi==WHITE) { 

curQizi=BLACK; 


message txt.innerHTML = "该 黑 棋 走 子 "; 
} else { 

curQizi=WHITE; 

message txt.innerHTML = "该 白 棋 走 子 "; 


} 
} else if (checkNext (curQizi)) { 

// 判 断 自己 是 否 有 棋 可 走 ， 如 有 ， 给 出 提示 

message txt.innerHTML = "对 方 无 棋 可 走 ， 请 继续 "; 
} else {// 双 方 都 无 棋 可 走 ， 游 戏 结束 ， 显 示 输 赢 信 息 
isLoseWin(); 
}// 统 计 双方 的 棋子 数量 ， 显 示 输 赢 信息 
} 

else { 
message txt.innerHTML = "不 能 落 子 !"; 
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4. 可 否 落 子 判断 
Can_go(x1，y1) 从 左 、 左 上 、 上 、 右 上 、 右 、 右 下 、 下 、 左 下 8 个 方向 判断 (x1,，y1) 
处 可 否 沙 子 。 


CheckDirect() 判 断 某 方向 上 是 否 形成 夹击 之 势 ， 如 果 形成 且 中 间 无 空子 则 返回 True。 
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checkNext(i) 验 证 参数 代表 的 走 棋 方 是 否 还 有 棋 可 走 。 


Can_Num() 统 计 可 以 落 子 的 位 置 数 。 


5. 翻转 对 方 的 棋子 
FanALLQi(int xl, int y1) 从 左 、 左 上 、 上 、 右 上 、 右 、 右 下 、 下 、 左 下 8 个 方向 翻转 对 
方 的 棋子 。 





\ HTML5 网 页 游戏 设计 从 基础 到 开发 


DirectReverse() 针 对 某 方向 上 已 形成 夹击 之 势 的 对 方 棋子 进行 翻转 。 
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FanQi(int x, int y) 将 存储 (x, y) 处 棋子 信息 qizi[x][y] 进 行 反 色 处 理 。 


InBoard0 判 断 (x,y) 是 否 在 棋盘 界 内 ， 如 果 在 界 内 则 返回 真 ， 否 则 返回 假 。 


6.， 显示 执 棋 方 可 落 子 位 置 
“ 走 棋 提 示 ” 按 钮 单 击 事件 函数 是 DoHelp0， 它 显示 可 以 落 子 的 位 置 提示 。 
Show_Can_ Position() 用 图 片 辆 显示 可 以 落 子 的 位 置 。 
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7. 判断 胜 负 功能 
isLoseWin0 统 计 双 方 的 棋子 数量 ， 显 示 输 赢 信息 。 





至 此 就 完成 黑白 棋 游戏 设计 了 。 
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俄罗斯 方块 游戏 








国 加 俄罗斯 方块 游戏 介绍 


俄罗斯 方块 是 一 款 风靡 全 球 的 电视 游戏 机 和 掌上 游戏 机 游戏 ， 它 曾经 造成 的 帮 动 与 造 
成 的 经 济 价值 可 以 说 4 是 游戏 史上 的 一 件 大 事 。 这 款 游戏 最 初 是 由 前 苏联 的 游戏 制作 人 Alex 
Pajitnov 制作 的 ， 它 看 似 简单 但 却 变化 无 穷 ， 游 戏 过 程 仅 需 要 玩家 将 不 断 下 落 的 各 种 形状 
的 方块 移动 、 翻 转 ， 人 
纳 下 落 的 方块 时 ， 就 宣告 游戏 结 5 

可 见 俄罗斯 方块 的 需求 如 下 : 

(1) 由 移动 的 方块 和 不 能 动 的 固定 方块 组 成 

(2) 一 行 排 满 消除 ; 

(3) 能 产生 多 种 方块 ; 

(4) 玩家 可 以 看 到 游戏 的 积分 。 

本 章 开 发 俄罗斯 方块 游戏 程序 ， 俄 罗斯 方块 游戏 界面 如 图 12-1 所 示 。 
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图 12-1 俄罗斯 方块 游戏 界面 


[ 歼 程 序 设计 的 思路 


?12.2.1 俄罗斯 方块 形状 设计 
的 方块 有 着 各 种 不 同 的 形状 ， 要 在 游戏 中 给 夯 不 同形 状 的 方块， 
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用 合理 的 数据 表示 方式 。 目 前 常见 的 俄罗斯 方块 拥有 7 种 基本 的 形状 以 及 它们 旋转 以 后 的 
变形 体 ， 具 体 的 形状 如 图 12-2 所 示 。 


ei 


国 | 
加 到 到 到 弹 各 到 到 
图 12-2 俄罗斯 方块 形状 
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图 12-3 俄罗斯 方块 示意 图 











每 种 形状 都 是 由 不 同 的 黑色 小 方 格 组 成 的 ， 如 图 12-3 所 示 , 在 屏幕 上 只 需要 显示 必要 
的 黑色 小 方 格 就 可 以 表现 出 各 种 形状 ， 我 们 发 现 每 一 形状 都 是 由 4 个 小 方 格 组 成 的 ， 我 们 
完全 可 以 用 4 个 点 来 表示 。 

4 个 点 的 坐标 分 别 是 什么 呢 ? 每 个 形状 都 有 一 个 自己 的 坐标 系 ， 例 如 S 形 强 ， 可 以 如 
图 12-4 表示 。 





图 12-4 S 形 形 状 坐标 系 
S 形 的 数据 模型 可 以 表示 为 4 个 点 组 成 的 数组 : [[0,-1],[0,0],[-1,0],[-l,1]]。 





图 12-5 工 形 形状 坐标 系 


第 12 章 俄罗斯 方块 游戏 


如 图 12-5 所 示 , 工 形 的 数据 模型 可 以 表示 为 4 个 点 组 成 的 数组 :[[-1.0][0.0][1.0]， 
[0.1]]。 

可 以 用 同样 的 方法 建立 其 他 形状 的 数组 模型 ， 然 后 再 将 这 7 个 形状 的 数组 模型 合 起 来 
组 成 一 个 大 的 数组 。 

另外 ， 每 个 形状 可 以 是 音色， 也 可 以 有 自己 的 颜色 。 增 加 颜色 会 增加 编程 的 复杂 度 ， 
但 是 也 增加 不 了 多 少 ， 所 以 我 们 的 模型 中 也 会 考虑 颜色 。 

最 后 ， 我 们 最 好 给 每 个 形状 一 个 编号 ， 这 样 方便 在 形状 数组 和 颜色 数组 中 应 用 它们 。 

完成 上 面 的 分 析 后 ， 我 们 就 可 以 给 出 形状 数据 模型 的 代码 了 : 


// 各 种 形状 的 编号 ，0 代表 没有 形状 
NoShape=0; 

ZsShape=1; //z 形 
SShape=2;//S 形 

Lineshape=3; // 竖 条 形 
TShape=4; //T 形 
SquareShape=5;// 正方 形 
LShape=6; /人 / 氏 形 
MirroredLShape=7 // 反 转 工 

// 各 种 形状 的 颜色 
Colors=["black", "fuchsia", "#cff", "red", "orange", "aqua", "green", "yellow"]; 


// 各 种 形状 的 数据 描述 

















Shapes=[ 
[DO 
有 | 请 
沿用 
[EU LOSD TO 5 0 0 
| ee 0 2 Et 0 LO 0 
| 本 
| i 
| 本 DEO Ea 


]; 
? 12.2.2 ”俄罗斯 方块 游戏 面板 屏幕 


游戏 的 面板 是 由 一 定 的 行 数 和 列 数 的 单元 格 组 成 的 ， 游 戏 窗 口 面板 屏幕 可 以 看 成 如 图 
12-6 所 示 。 

屏幕 由 20 行 10 列 的 网 格 组 成 ,为 了 存储 游戏 画面 中 的 已 固定 方块 采用 二 维 数 组 lines， 
当 相应 的 数组 元 素 值 非 零 (数组 元 素 值 0 为 此 单元 格 无 方块 ), 则 绘制 一 个 对 应 彩色 小 方块 。 
一 个 俄罗斯 方块 形状 在 窗口 面板 中 的 显示 只 需要 把 面板 中 相应 的 单元 格 绘制 为 彩色 方块 即 
可 ， 如 图 12-7 所 示 面 板 中 显示 一 个 “L” 形 方块 ， 只 需要 按照 “L” 形 方块 形状 数组 定义 ， 
将 它 的 数据 用 Paint0 方 法 绘制 到 窗口 面板 即 可 。 
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图 12-6 屏幕 网 格 
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图 12-7 “L” 形 方块 下 落 前 和 下 落后 
























































而 方块 下 落 的 基本 处 理 方式 就 是 当前 方块 下 移 一 行 ， 然 后 根据 当前 方块 的 数组 的 数据 
和 存储 的 固定 方块 的 面板 二 维 数组 lines, 重新 绘制 一 次 屏幕 即 可 ,如 图 12-7 所 示 。 所 以 要 
使 用 一 个 坐标 (row，col) 记录 当前 方块 形状 所 在 的 行 号 row 和 列 号 col。 
?12.23. 定 位 和 旋转 形状 


1. 定位 





我 们 上 面 说 到 每 个 形状 都 是 在 自己 的 坐标 系 里 面 描述 的 ， 另 外 还 有 一 个 屏幕 上 的 全 局 
坐标 系 ， 用 来 给 形状 定位 ， 这 样 我们 就 需要 一 个 方法 将 形状 的 4 个 点 从 自身 坐标 系 转换 到 
屏幕 上 的 全 局 坐标 系 ， 从 而 给 形状 定位 。 


假如 S 形 在 自身 坐标 系 中 4 个 点 的 坐标 为 : [[ 0, -1 ], 


它 当前 在 屏幕 上 全 局 坐标 系 位 置 为 : [12.8] 


则 4 个 点 转换 为 全 
[-1+12, 118]] 





局 坐标 系 的 坐标 为 : [ [ 0+12, -1+8 ], 


[0.0]， [-1,0], [-1,1]] 


[0+12,0+8], [-1+12,0+8], 
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这 样 ， 我 们 就 完成 了 S 形 的 全 局 坐标 转换 。 

这 里 需要 注意 一 个 问题 ， 形 状 自身 坐标 系 是 用 (x，y) 描述 的 ， 而 全 局 坐标 系 为 了 由 
辑 上 更 直观 ， 是 用 (row，col) 描述 的 ， 所 以 我 们 在 实际 编程 中 并 不 是 像 上 面 那样 转换 的 ， 
而 是 : 

[[-1+12, 0+8 ]， [0+12,0+8], [0+12, -1+8 ]，[ 1+12, -1+8 ] ] 

即 先 将 x 变 为 col ，y 变 为 row ， 再 转换 为 全 局 坐标 系 。 

2. 旋转 

旋转 是 在 形状 的 自身 坐标 系 中 ， 围 绕 形状 的 原点 完成 的 ， 公 式 很 简单 ， 每 个 点 旋转 后 
的 坐标 与 旋转 前 的 坐标 的 关系 如 下 (向 右 旋转 ): 

w= 

y=-xX 

注意 : 正方 形 形 状 不 发 生 旋转 。 

有 了 上 面 的 分 析 ， 就 可 以 给 出 两 个 全 局 方法 ， 用 来 对 形状 进行 全 局 定位 和 旋转 。 

translate(data,row,col) 将 形状 自身 的 坐标 系 转换 为 屏幕 的 全 局 坐标 系 ，(row,col) 为 当前 
形状 原点 在 屏幕 中 的 位 置 。 

function translate (data, row, col1){ 

var copy=[]; 

for (var i=0;i<4;i++){ 
Var temp={}; 
temp .row=data[i] [1]+row; 
temp.col=data[i] [0]+col; 
copy.push (temp); 


} 
return copy; 
































} 


每 种 形状 向 右 旋转 就 会 形成 一 个 新 的 形状 ，rotate (data) 可 以 得 到 当前 形状 方块 旋转 
后 的 坐标 数组 。 


// 向 右 旋转 形状 : x'=y，y'=-x 
function rotate (data) { 
var copy=[[],[],[],[]]; 
for(var i=0;i<4;i++){ 
copy[i] [0]=datal[li] [1]; 
copy [il] [1]=-data[i] [0]; 
} 
return copy; 
} 


3. 游戏 流程 
俄罗斯 方块 游戏 就 是 用 一 个 定时 器 控制 方块 下 落 并 重 绘 的 过 程 ， 用 户 可 以 利用 键盘 输 
入 改变 方块 状态 。 每 隔 一 定 的 时 间 就 重 画 当前 下 落 方块 和 lines 存储 的 固定 方块 ， 从 而 看 到 
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动态 游戏 效果 。 

俄罗斯 方块 下 落 过 程 中 可 能 遇 到 种 种 情况 ， 例 如 是 否 需 要 消 行 ， 是 否 需 要 终止 下 落 并 
且 产 生 新 的 形状 的 方块 等 。 具 体 的 判断 流程 如 下 : 首先 判断 是 否 可 以 继续 下 落 ， 可 以 下 落 
则 row++ 即 可 。 如 果 方块 不 能 够 继续 下 落 ， 则 将 当前 形状 的 方块 添加 到 面板 二 维 数 组 lines 
中 ， 界 面 产 生 新 的 形状 的 方块 且 判 断 是 否 需 要 消 行 。 最 后 请 求 重 新 绘制 屏幕 。 


程序 设计 的 步骤 
34123341 游戏 页 面 








<html> 

<head> 

<title></title> 

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 

<script type="text/javascript" language="javascript" src="jsgame.js"> 
</script> 

</head> 

<body> 

<audio src="Kalimba.mp3" id="snd"> 

你 的 浏览 器 不 支持 audio 标记 。 

</audio> 

<canvas id="html5 09 1" width="260" height="400" style="background-color: 
Black"> 

你 的 浏览 器 不 支持 canvas 标记 ， 请 使 用 Chrome 浏览 器 或 者 FireFox 浏览 器 。 

</canvas> 

<canvas id="htm15 09 2" width="100" height="100" style="background-color: 
red"> 

你 的 浏览 器 不 支持 canvas 标记 ,请 使 用 chrome 浏览 器 或 者 FireFox 浏览 器 。 

</canvas> 

<p /> 

<div id="textmsg"> 分 数 </div> 

<input type="button" value=" 开 始 " onclick="start()" /> 





<input type="button" id="btnPause" value=" 暂 停 " onclick="pause()" /> 
<script type="text/javascript"> 


Ue dd 


1. 设计 方块 类 Block 

方块 类 Block 中 定义 方块 的 类 型 ID, 存储 方块 的 形状 二 维 数组 data 以 及 颜色 。 设计 了 
将 形状 自身 的 坐标 系 转换 为 屏幕 的 坐标 系 的 translate (row，col) 函数 ， 参 数 (row，col) 
为 当前 形状 方块 的 原点 在 屏幕 Map 中 的 位 置 。 rotate0 函 数 可 以 获取 当前 形状 方块 旋转 后 的 
坐标 数组 。 


/* 
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* 方块 类 

* 说 明 : 各 种 形状 的 方块 

*/ 

function Block() { 
wthisedata = [Ll Lr Tle 

, 

Block.prototype.Block = function () { 
this.born(); 

} 

// 产 生 一 个 新 的 形状 方块 

Block.prototype.born = function () { 
// 随 机 选择 一 个 形状 
this.shape id = Math.floor(Math-random() * 7)+1; // 产 生 1 一 7 的 数 
this.data = Shapes[this.shape id]; // 存 储 方块 部 件 的 形状 
this.color = Colors[this.shape_id]; // 存 储 方块 部 件 的 颜色 
console.1log(this.data); 

} 


// 将 形状 自身 的 坐标 系 转换 为 屏幕 Map 的 坐标 系 
// (row，col) 为 当前 形状 方块 的 原点 在 Map 中 的 位 置 
Block.prototype.translate = function (row, col) { 
Var copy = []; 
FOr (var Lr = OF LTP 
Var temp = {}; 


temp .row = this.datal[li] [1] + row; 
temp.col = this.data[li] [0] + col; 
copy.push (temp); 
} 
return copy; 
上 
// 向 右 旋转 一 个 形状 : x'=y，y'=-x， 得 到 旋转 后 的 data 
Block.prototype.rotate = function () { 
var Copy = El lr Ee El 
FOr {var 3 = "0% 1 < Ay LF) 二 
copy[i] [0] this.data[i] [1]; 
copy [i] [1] -this.datal[i] [0]; 


} 
return copy; 
} 


另外 ， 程 序 中 将 各 方块 形状 编号 : Z 形 编号 1，S 形 编号 2， 竖 条 形 编号 3， 工 形 编号 
4， 正 方形 编号 5， 工 形 编号 6， 反 工 形 编号 7。 所 有 方块 的 形状 采用 数组 Shapes 存储 。 通 
过 编号 从 Shapes 中 获取 方块 的 形状 信息 。 


// 每 一 格 的 间距 ， 也 即 一 个 小 方块 的 尺 十 
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Spacing = 20; 

// 各 种 形状 的 编号 ，0 代表 没有 形状 

NoShape = 0; 

2ZShape 下 

SShape = 2; 

LineShape = 3; 

TShape = 4; 

SquareShape = 5; 

LShape = 6; 

MirroredLShape = 7 

// 各 种 形状 的 数据 描述 

Shapes = [ 
[0，0]，[0，0]，[0，0]，[0，0]]， 
[人 全 Ls 
LO = 0 Ol Er Dir Ll Ll 
[0, -1], [0, 0], [0, 1], [0, 2]], 
G1 O15 Tor Ole ths Ds [or TEs 
[Oz OF7 [Le Ol LOW Tl Ll7 Tl]s 
(lr Dr bo Tle Lo Ol LOL 
el EO SL] LO OL EOReL]d 





// 各 种 形状 的 颜色 

Colors = ["black", "fuchsia", "#cff", "red", "orange", "aqua", "green", 
"yellow"]; 

2. 设计 游戏 容器 Map 类 

游戏 容器 Map 类 是 游戏 实例 ， 首 先 定义 游戏 面板 大 小 ,在 游戏 面板 中 存储 所 有 方块 的 


“容器 ”一 一 二 维 数组 lines， 初 始 时 每 个 元 素 存储 为 NoShape (0)， 表 示 此 格子 处 无 方块 。 
/* 
* Map 类 说 明 : 由 m 行 Line 组 成 的 格子 阵 
a 
function Map(w, h) { 
// 游 戏 区 域 的 长 度 和 宽度 


this.width = w; 
this.height = h; 
// 生 成 height 个 line 对 象 ， 每 个 1ine 宽度 为 width 
this.lines = []; 
for (Var row = 0; row < hy row++) 
this.lines[row] = this.newLine(); 
} 
// 说 明 : 由 nn 个 格子 组 成 的 一 行 
Map.prototype.newLine = function () { 
var shapes = []; 


for (var col = 0; col < this.width; col++) 
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shapes[col] = NoShape; 
return shapes; 
} 

















isFullLine (row) 判 断 一 行 是 否 全 部 被 占用 《〈 满 行 )， 如 果 有 一 个 格子 为 NoShape 则 返 
回 false。 


Map.prototype.isFullLine = function (row) { 
Var line = this.lines[row]; 
for (var col = 0; col < this.width; col++) 
if (line[col] == NoShape) 
return false 
return true; 


} 
预先 移动 或 者 旋转 形状 , 然后 isCollide(data) 函 数 分 析 形 状 中 的 4 个 点 是 否 有 以 下 碰撞 
情况 : 
(1) col<0 | col>this.width， 超 出 左右 边界 。 
(2) row 一 this.height， 说 明 形状 已 经 到 最 底部 。 
-点 的 shape id 不 为 NoShape， 则 发 生 碰 撞 。 
如 果 发 生 碰撞 则 放弃 移动 或 者 旋转 。 





Map.prototype.isCollide = function (data) { 
For (var Le OF Ld ed 
Var row = datal[il] .row; 
Var col = datal[li] .col; 
//console.1og (row, col); 
if (col < 0 || col == this.width) return true; 
if (row == this.height) return true; 
if (row < 0) continue; 
else 
if (this.lines[row] [col] != 0)//NoShape 
return true; 
} 
return false; 
} 





形状 在 向 下 移动 的 过 程 中 发 生 碰撞 , appendShape = function (shape_id, data) 则 将 形状 加 
入 到 lines 容器 中 国定 下 来 。 

















Map .prototype.appendShape = function (shape id, data) { 
// 对 于 形状 的 4 个 点 
For var i = 0 de a Tt 
Var row = datal[li] .row; 
Var col = datali] -col 


// 找 到 所 在 的 格子 ， 将 格子 的 颜色 改 为 形状 的 颜色 
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this.lines[row] [col] = shape id; 


} 
// 形 状 被 加 入 到 1ines 容器 中 后 ， 要 进行 逐 行 检测 ， 发 现 满 行 则 消除 
for (var row = 0; row < this.height; row++) { 
if (this.isFullLine(row)) { 
/ /绘制 消除 效果 
onClearRow (row); 
// 将 满 行 删除 
this.lines.splice(row, 1); 
// 第 一 行 添加 新 的 一 行 


this.lines.unshift (this.newLine()); ; 


} 


3. 设计 游戏 逻辑 类 GameModel 
游戏 逻辑 类 GameModel 实现 游戏 控制 ， 首 先 定 义 游戏 面板 map、 当 前 的 俄罗斯 方块 
currentBlock、 下 一 个 的 俄罗斯 方块 nextBlock 以 及 当前 的 俄罗斯 方块 所 在 位 置 等 。 


function GameModel (w, h) { 
this.map = new Map(w, h); 
this.currentBlock = new Block(); // 当 前 的 俄罗斯 方块 
this.currentBlock.Block(); 
this.row = 1; ”// 当 前 的 俄罗斯 方块 所 在 位 置 ( 顶 端 中 央 ) 
this.col = Math.floor (this.map.width / 2); 
this.nextBlock = new Block(); // 下 一 个 俄罗斯 方块 
this.nextBlock.Block(); 
// 通 知 数据 发 生 了 更 新 
onUpdate () 7 

了 


CreateNewBlock (0 产生 新 的 俄罗斯 方块 。 它 首先 复制 下 一 个 形状 this.nextBlock， 然 后 
再 产生 下 一 个 的 俄罗斯 方块 。 
GameModel .prototype.CreateNewBlock = function () { 
this.currentBlock = this.nextBlock; // 复 制 预览 区 形状 
this.row = 1; // 重 置 形状 的 位 置 为 出 生地 点 (顶端 中 央 》 
this.col = Math.floor (this.map.width / 2); 
this.nextBlock = new Block(); 
this.nextBlock.Block (); 


以 下 是 控制 形状 方块 左右 移动 、 旋 转 和 下 移 。 并 且 保证 左右 移动 时 和 lines 中 存储 的 固 
定 方块 、 边 界 不 碰撞 ， 如 果 碰 撞 则 恢复 数据 放弃 移动 。 


// 向 左 移动 
GameModel .prototype.left = function () { 














上 RCRQI 二 过 
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Var temp = this.currentBlock.translate (this.row, this.col); 


if (this-.map.iscollide (temp)) // 发 生 碰 撞 则 放弃 移动 
this.col++; 
else // 通 知 数据 发 生 了 更 新 


onUpdate (); 
} 


// 向 右 移 动 
GameModel .prototype.right = function () { 
thjisscolHrr 
Var temp = this.currentBlock.translate (this.row, this.col); 
if (this.map.isCollide (temp)) 
Es -C0l = 
else 
onUpdate (); 
} 


同样 保证 旋转 时 和 lines 中 存储 的 固定 方块 、 边 界 不 碰撞 ， 如 果 碰撞 则 恢复 数据 放弃 
旋转 。 


// 旋 转 
GameModel .prototype.rotate = function () { 
// 正 方形 不 旋转 
if (this.currentBlock.shape id == SquareShape) return; 
// 获 得 旋转 后 的 数据 
Var copy = this.currentBlock.rotate(); 
// 转 换 坐 标 系 
Var temp = this.currentBlock.translate (this.row, this.col); 
// 发 生 碰撞 则 放弃 旋转 
if (this.map.isCollide (temp)) 
return; 
// 将 旋转 后 的 数据 设 为 当前 数据 
this.currentBlock.data = copy; 
// 通 知 数据 发 生 了 更 新 


onUpdate () 
} 


方块 下 落 需 判断 是 否 “ 触 底 ”或 接触 到 其 他 已 落 方块 ， 如 果 “ 触 底 ” 则 固定 到 游戏 面 
板 上 ， 此 时 要 处 理 满 行 和 游戏 结束 的 判断 ， 同 时 产生 新 的 俄罗斯 方块 。 


// 下 落 

GameModel .prototype.down = function () { 
var old = this.currentBlock.translate (this.row, this.col); 
this.rowt+; 
Var temp = this.currentBlock.translate (this.row, this.col); 


if (this.map.isCollide(temp)) { 
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// 发 生 碰 撞 则 放弃 下 落 
this.row-——; 
// 如 果 在 1 也 无 法 下 落 ， 说 明 游 戏 结束 
if (this.row == 1) { 
// 通 知 游戏 结束 
onGameOver (); 
return; 
+" 
// 无 法 下 落 则 将 当前 形状 加 入 到 Map 中 
this .map.appendShape (this.currentBlock.shape id, ol1d); 
this.CreateNewBlock();// 产 生 新 的 俄罗斯 方块 
} 
// 通 知 数据 发 生 了 更 新 
onUpdate (); 
} 


4. 游戏 主 程序 
就 是 定时 事件 中 ， 完 成 下 落 功 能 : 
var display = document.getElementById("htm15 09 1");// 游 戏 面 板 


var display2 = document.getElementById("htm15 09 2");// 预 览 区 域 
var model = null; 


var loop interval null; 

var tick interval = null; 

var waiting = false; 

var speed = 500; 

07 

Var textmsg = document -getElementById ("textmsg") ; 
function start() { 


Var score 


model = new GameModel (display.width / Spacing, display.height / Spacing) 
loop(); 
} 
function pause() { 
waiting = !waiting; 
if (waiting) 
document .getElementById ("btnPause") .value 


"继续 "> 
else 
document .getElementById ("btnPause") .value = "暂停 "; 
} 
// 消 息 循环 
function loop() { 
tick interval = setInterval (function () { 
if (waiting) return; 
onTick() ;// 时 钟 事件 即 下 落 
}, speed); 
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以 下 是 消息 事件 处 理 : 


以 下 才 是 真正 的 绘制 代码 ，clearline(row) 绘 制 清除 行 的 暂停 效果 : 
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} 





waiting = true; 

Var ctx = display.getContext ("2d"); 

ctx.fillRect (0, row * Spacing, display.width, Spacing, "black"); 
setTimeout ("waiting=false;", 50); 








paint() 绘 制 游戏 屏幕 。 它 将 lines 存储 的 所 有 固定 方块 画 到 游戏 面板 中 ， 同 时 当前 方块 














画 到 游戏 面板 中 和 下 一 个 方块 画 到 游戏 面板 右 侧 提示 预览 区 中 。 








function paint() { 


Var map = model .map; 
Var data = model .currentBlock.translate (model .row, model.col); 
Var nextdata = model .nextBlock.translate(1，2) ;// 在 预览 区 (1，2) 处 位 置 
// 清 屏 
Var ctx = display.getContext ("2d"); 
ctx.clearRect (0, 0, display.width, display.height); 
var ctx2 = display2.getContext ("2d"); 
ctx2.clearRect (0, 0, display2.width, display2.height); 
Var lines = map.lines; 
// 游 戏 面板 中 依次 绘制 每 一 个 非 空 的 格子 固定 的 方块 ) 
for (var row = 0; row < map.height; row++) 
for (var col = 0; col < map.width; col++) { 
var shape id = lines[row] [col]; 
if (shape id != NoShape) { 
Var y = row * Spacing; 
Var x = col * Spacing; 
var color = Colors[shape id]; 
var ctx = display.getContext ("2d"); 
Ctx tilLStyle = "rqbal(255r255;725570.2) 
ctx.fillRect (x, y, Spacing, Spacing); 
ctzx.fillStyle = color; // 形 状 前 景色 
ctx.fillRect(xX + 1, y + 1，Spacing-2，Spacing - 2); 


} 
// 绘 制 当 前 的 方块 
for (var i 
var y = 


0 
data[i] .row * Spacing; 
Var x = data[i] .col * Spacing; 
Var color =model .currentBlock.color; //Colors [model. currentBlock. shape id]; 
var ctx = display.getContext ("2d"); 
cEx EllOEVIS = "pqbal253 .255 25 02) 
ctx.fillRect (x, y, Spacing, Spacing); 
ctx.fillstyle = color; // 形 状 前 景色 
ctx.fillRect(x + 1, y + 1, Spacing - 2, Spacing - 2); 
} 
// 绘 制 预 览 区 中 下 个 方块 


第 12 章 “俄罗斯 方块 游戏 





至 此 ， 俄 罗斯 方块 游戏 编写 完成 。 
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贪 吃 蛇 游戏 





贪 吃 蛇 游戏 介绍 

在 该 游戏 中 ， 玩 家 操纵 一 条 贪 吃 的 蛇 在 长 方形 场地 里 行走 ， 贪 吃 蛇 按 玩 家 所 按 的 方向 
键 折 行 ， 蛇 头 吃 到 食物 ( 豆 ) 后 ， 分 数 加 10 分 ， 蛇 身 会 变 长 ， 如 果 贪 吃 蛇 磁 上 墙壁 或 者 自 
身 的 话 ， 游 戏 就 结束 了 当然 也 可 能 是 减 去 一 条 生命 )。 游 戏 运行 界面 如 图 13-1 所 示 。 
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图 13-1 贪 吃 蛇 游戏 运行 界面 


程序 设计 的 思路 

把 游戏 画面 看 成 40X30 的 方 格 。 豆 和 组 成 蛇 的 块 均 在 屏幕 上 占据 一 个 方 格 。 游 戏 设 
计 中 主要 用 到 的 4 个 类 如 下 : 

Farm 类 : 主要 用 来 显示 场地 ， 随 机 生成 食物 ， 初 始 化 一 条 蛇 。 

Food 类 : 抽象 了 食物 〈 豆 ) 的 属性 和 动作 。 

Snake 类 : 抽象 了 贪 吃 蛇 的 属性 和 动作 ， 调 用 Block 类 来 组 成 蛇 ， 并 处 理 键盘 输入 事 
件 和 蛇 的 移动 。 

Block 类 : 表示 组 成 蛇 的 块 (实心 贺 )。 一 条 蛇 可 以 看 成 由 许多 “ 块 ”( 或 称 节 ) 拼凑 
而 成 ， 块 是 蛇 身 上 最 小 的 单位 。 
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程序 设计 的 步 又 
?13.3.1 ”游戏 页 面 





<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title> 小 游戏 之 贪 吃 蛇 </tit1le> 
<style> 
#canvas{border: 3px solid red;} 
</style> 
</head> 
<body> 
<canvas id='canvas' width='800' height='600'></canvas> 
<div id="textmsg"> 分 数 </div> 
</body> 





食物 ( 豆 ) 类 (Food) 设计 
在 此 游戏 中 ， 首 先 会 在 场地 的 特定 位 置 出 现 一 个 豆 ， 豆 要 不 断 被 蛇 吃 掉 ， 当 豆 被 吃 掉 
后 ， 原 豆 消 失 ， 又 在 新 的 位 置 出 现 新 的 豆 。 这 些 豆 都 是 由 豆 (Food) 类 创建 的 对 象 。 
foodIitO 函 数 在 屏幕 上 显示 一 个 豆 〈 实 心 圆 )， 设 计 方 法 是 直接 在 场地 〈canvas) 上 画 
-个 实心 圆 。 
equal() 功 能 判断 是 否 与 蛇 身 “ 块 ”node 重合 ， 也 就 是 蛇 吃 到 食物 。 


// 食 物 类 

function Food(x, y, w) { 
var 七 = this; 
t.x = x;//X 坐标 


t.y = y;//Y 坐标 
t.w = Ww;// 大 小 
// 食 物 


t.foodInit = function () { 
// 画 一 个 实心 圆 
ctx.beginPath (); 
ctx ABC WN Dr 2 2 D300 和 Se 
ctx.fillstyle = "red"; // 填 充 颜色 ,默认 是 黑色 
ctx.fill1 (); // 画 实心 圆 
ctx.closePath (); 

} 

// 判 断 是 否 重合 


t.equal = function (node) { 
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2. 块 类 (Block) 

在 贪 吃 蛇 游戏 中 ， 块 用 来 构成 蛇 ， 在 蛇 出 现时 ， 要 把 构成 蛇 的 块 一 个 个 输出 〈 显 示 )， 
在 蛇 消 失 时 ， 要 把 块 消除 掉 ， 显 示 和 消除 哪 一 个 块 都 要 由 位 置 决定 ， 并 且 由 于 蛇 是 由 多 个 
块 构成 的 ， 每 个 块 要 填 到 snakes 数组 中 。 


Loc] 


3. 蛇 类 (Snake) 设计 
现在 到 了 最 难 的 地 方 ， 就 是 处 理 蛇 ， 一 条 完整 的 贪 吃 蛇 是 由 一 块 一 块 组 成 的 。snakes 
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用 于 存放 组 成 蛇 的 所 有 块 ， snakes 中 保存 的 第 一 个 元 素 是 蛇 的 头 部 ， 最 后 一 个 元 素 是 蛇 的 
尾巴 。 当 蛇 运动 的 时 候 ， 它 头 部 增加 一 块 而 尾部 减少 一 块 。 如 果 它 吃 到 了 豆 ， 头 部 增加 一 
块 而 尾部 不 减少 。 也 就 是 说 ， 蛇 是 从 头 部 开始 长 的 。 蛇 运行 过 程 中 要 不 断 地 改变 方向 ， 如 
果 蛇 头 碰 到 了 它 自身 ， 蛇 就 要 死亡 即 程 序 结束 。 

首先 是 画 一 条 蛇 并 移动 它 : 


识别 键盘 事件 ， 修 改 移动 方向 dir， 初 始 移动 dir 方向 为 RR' (向 右 ): 
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} 


以 下 主要 是 让 蛇 动 的 move 方法 。 主 要 是 根据 原来 蛇 头 snakes[0] 的 位 置 和 移动 方向 确 
定 新 的 蛇 头 位 置 ， 绘 制 新 的 蛇 头 ， 并 清除 原来 的 蛇 尾 即 达 到 移动 效果 。 
在 蛇 移 动 时 , 判断 蛇 头 是 否 和 食物 相 撞 , 是 否 碰 撞 到 了 场地 的 壁 以 及 是 否 与 自己 相 撞 。 


// 移 动 蛇 
t.move = function () { 
var newHead; 
// 是 否 碰撞 到 了 场地 的 壁 
if (snakes[0] .x + snakes[0] .w >= canvas.width||snakes[0] .x-snakes[0] .w<0 || 
snakes[0] .y -snakes[0] .w <0 || snakes[0] .y+ snakes[0] .w > canvas.height){ 
gameover (); 
} 
else {// 根 据 原来 蛇 头 snakes [0] 的 位 置 和 移动 方向 确定 新 的 蛇 头 位 置 


EE (Edir ss VR 

newHead=newBlock (snakes[0] .x+gridWidth, snakes[0] .y, griqdwidth); 
} else if (t.dir == 'L') { 

newHead=new Block (snakes[0] .x -gridWwidth, snakes[0] .y, gridwiadth); 
} else if (t.dir == 'D') { 

newHead=new Block (snakes[0] .x, snakes[0] .y+gridWwidth, gridWidth) > 
} else if (t.dir == 'U') { 


newHead=new Block (snakes [0] .x, snakes[0] .y- gridWwidth, gridwiath); 


// 禁 止 反 向 跑 

if (newHead.x == snakes[l1] .x && newHead.y == snakes[1].y) { 
Edir = tOdir> 
return; 

} 

// 画 新 的 蛇 头 

newHead.drawBlock (); 

// 追 加 到 数组 中 长 度 会 自动 加 ) 

snakes .unshift (newHead); 

// 清 除 原 来 尾部 

snakes [snakes.length - 1] .clear(); // 清 除 ( 蛇 尾 ) 块 

// 并 从 数组 中 移 除 (长 度 会 自动 减 ) 


snakes .pop (); 


// 判 断食 物 是 否 和 蛇 头 相 撞 
for (var i = 0; i < foods.length; i++) { 


if (foods[i].equal(snakes[0])) { 
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// 给 蛇 增加 长 度 

七 .growth () ; // 蛇 生长 方法 

score = score + 10; // 增 加 10 分 
textmsg.innerHTML = score + "分 "; // 显 示 分 数 
t.len = t.len + 1; 

clearIinterval (snake interval); 

speed = speed < 20 ? speed : speed - 10;// 速 度 加 快 
snake interval = setInterval(t.move, speed); 


} 
// 判 断 是 否 与 自己 相 撞 
for (var i = 1; i < snakes.length; i++) { 
if (snakes[i] .equal(snakes[0])) { 
gameover (); 


]7 
} //move 函数 结束 


蛇 生 长 方法 growth0 功 能 是 当 蛇 吃 到 一 粒 豆 后 ， 蛇 就 要 在 它 的 尾巴 上 增加 一 块 即 蛇 增 
长 。 设 计 思 路 是 找到 蛇 尾 snakes[snakes.length-1] ， 根 据 蛇 尾 与 蛇 的 倒数 第 2 块 
snakes[snakes.length - 2] 的 位 置 关 系 ， 计 算出 蛇 尾 新 增 一 块 的 位 置 。 


// 给 蛇 增加 长 度 〔 在 尾巴 加 ) 
七 .growth = function () { 
Var taill = snakes[snakes.length - 1]; 
var tail2 = snakes[snakes.length - 2]; 
Var addBlock; 
if (taill.x == tail2.x) { 
if (taill.y >= tail2.y) 
addBlock = new Block (taill.x, taill.y + gridwidth, gridwidth); 
else 
addBlock = new Block (taill.x, taill.y - gridwidth, gridwidth); 
} 
else { 
EE Ea Stal 
addBlock = new Block (taill.x + gridwidth, taill.y, gridwidth); 
else 
addBlock = new Block (taill.x - gridwidth, taill.y, gridwidth); 
四 
// 数 组 加 入 尾部 
snakes.push (addBlock); 
addBlock.drawBlock (); 
console.log(snakes.1length); 
} //growth 函数 
} /*snake 类 结束 */ 
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淖 


4. 场地 类 (Farm) 设计 
为 游戏 的 主场 地 ， 豆 要 在 此 范 
象 、 场 地 边框 、 豆 和 蛇 。 


// 场 地 类 ， 生 成 一 个 画布 和 食物 、 蛇 


function Farm() { 























目 内 出 现 ， 蛇 要 在 此 范围 内 运行 ， 显 示 场 地 内 的 所 有 对 


var 七 = this; 
ctx.fillstyle = 'white'; 
ctx.fillRect (0, 0, canvas.width, canvas.height); 
foods = []; // 重 新 初始 化 食物 数组 ， 不 要 把 前 一 次 游戏 的 数组 元 素 遗 留 
// 随 机 生成 一 个 食物 
t.addfood = function () { 
Var x = parseInt (canvas.width / gridWidth * Math.random()) * gridwidth; 
var y = parseInt (canvas.height / gridwidth * Math.random()) * gridwidth; 
Var food = new Food(x, y, gridWwidth); 
food.foodInit (); 
foods.push (food) 
} 
snakes = []; // 重 新 初始 化 蛇 身 〈 块 ) 数组 ， 不 要 把 前 一 次 游戏 的 数组 元 素 遗 留 
// 更 新 速度 500 毫秒 〈 即 移动 速度 ) 
t.snake = new Snake (100，100，5，500) ; // 初 始 5 节 长 度 ， 位 置 (100，100) 处 
t.snake.init(); // 画 蛇 
} 


5. 主 程序 
在 游戏 开始 后 ， 要 首先 初始 化 场地 Farm 类 ， 显 示 场 地 内 的 所 有 对 象 ， 场 地 边框 、 豆 
和 蛇 。 同 时 要 2 秒 随 机 产生 一 个 新 食物 并 显示 。 


Var canvas=document .getElementById ("canVas") 7 

Var ctx=canvas.getContext ('2d'); 

Var gridwidth=20; 

Var Score 07 

var foods = new Rrray()，snakes = new Rrray(); // 放 食物 和 蛇 的 数组 
// 开 始 游 戏 


function gamestart() { 


Var farm = new Farm(); 
//2 秒 产生 一 个 食物 
food interval = setInterval (farm.addfood, 2000); 
} 
gamestart (); 
// 结 束 
function gameover() { 
var judge = confirm(" 游 戏 结束 ， 是 否 重新 开始 ") ; 
score=0; 


textmsg.innerHTML = score + "分 "; 
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clearInterval (snake interval);// 清 除 产 生 蛇 移动 定时 
clearInterval (food interval) ;// 清 除 产生 新 食物 定时 
if (!judge) { // 选 择 不 重新 开始 


return false; 





. 
gameStart (); 
} 


至 此 ， 贪 吃 蛇 游戏 编写 完成 。 








于 加 需 电 游戏 介绍 

雷电 游戏 因为 操作 简单 ， 节 奏 明 快 ， 所 以 ， 作 为 纵 轴 射 击 的 经 典 之 作 ， 雷 电 系 列 受 到 
了 广大 玩家 的 欢迎 ， 可 以 说 是 老少 咸 宜 的 游戏 了 。 

本 章 开 发 模拟 雷电 的 飞机 射击 游戏 ， 下 方 是 玩家 的 飞机 ， 用 户 按 空格 键 能 不 断 地 发 射 
子弹 ， 上 方 是 随机 出 现 的 敌 方 飞机 。 玩 家 可 以 通过 键盘 的 方向 键 控制 自己 飞机 的 移动 ， 当 
玩家 飞机 的 子弹 碰 到 敌 方 飞 机 时 ， 政 方 飞机 出 现 爆炸 效果 ， 运 行 界面 如 图 14-1 所 示 。 


“机 大 战 
分 数 ，0 分 





图 14-1 飞机 射击 游戏 运行 界面 





OCONEENN 


游戏 程序 中 用 到 敌 方 飞 机 、 我 方 飞机 、 子 弹 、 收 机 被 击 中 的 爆炸 图 片 等 ， 分 别 使 用 图 
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[丰盛 丰 去 丰 


Plan.png 


i Wt A +- 
， ECB 
维稳 人 S20 A 2 


bomb.png 








14-2 所 示 的 图 片 表示 。 


ER A 


bullet.png 


小 由 


enemy.png 


图 14-2 相关 图 片 素材 





?14.2.2 “地 图 深 动 的 原理 





举 个 简单 的 例子 ， 大 家 坐 火 车 的 时 候 都 遇 到 过 自己 的 火车 明明 是 停止 的 ， 但 是 旁边 铁 
轨 的 火车 在 向 后 行驶 ， 会 有 一 种 错觉 ， 感 觉 自 己 的 火车 是 在 向 前 行驶 。 飞 行 射击 类 游戏 的 
地 图 原理 和 这 个 完全 一 样 。 玩 家 在 控制 飞机 在 屏幕 中 飞行 的 位 置 时， 背景 图 片 一 直 向 后 滚 
动 从 而 给 玩家 一 种 错觉 自己 控制 的 飞机 在 向 前 飞行 ， 如 图 14-3 所 示 是 两 张 地 图 图 片 
(map_0.png、map_1.png) 在 屏幕 背后 交替 滚动 ， 这 样 就 会 给 玩家 产生 自己 控制 的 飞机 在 向 
前 移动 的 错觉 。 

地 图 滚动 的 相关 代码 如 下 : 


function updateBg() { 

/** 更 新 游戏 背景 图 片 实现 向 下 滚动 效果 **/ 

mBitposY0 += 5;// 第 一 张 地 图 map_0.png 的 纵 坐 标 下 移 5 像素 

mBitposYl += 5;// 第 二 张 地 图 map_1.png 的 纵 坐 标 下 移 5 像素 

if (mBitposY0 == mScreenHeight) { // 超 过 游戏 屏幕 的 底 边 
mBitposY0 = -mScreenHeight;// 回 到 屏幕 上 方 

} 

if (mBitposYl == mScreenHeight) {// 超 过 游戏 屏幕 的 底 边 
mBitposYl = -mScreenHeight; // 回 到 屏幕 上 方 
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游戏 过 程 中 ， 不 断 更 新 游戏 背景 图 片 位 置 ， 下 移 5 像素 ， 实 现 向 下 滚动 效果 。 


黑色 区 域 为 屏幕 
区 域 。 地 图 A 地 
向 下 滚 
动 ， 在 屏幕 中 将 
产生 主角 飞机 向 


图 B 同 H 










游戏 开始 后 地 图 A 向 下 移动 


游戏 开始 后 地 图 B 向 下 移动 


前 移动 的 假象 地 图 B 向 下 平滑 
标 





?14.2.3 “飞机 和 子弹 的 实现 
游戏 中 使 用 到 的 飞机 、 子弹 均 采 用 对 应 的 





图 14-3 ”地 图 滚动 的 原理 





。 因 为 子弹 的 数量 会 有 很 多 ， 政 机 的 


数量 也 会 有 很 多 ， es - 颗 子 弹 需 要 用 一 pe 录 当 前 子弹 在 屏幕 中 的 x，y 坐标 。 


每 一 架 敌 机 也 是 


pt 


爆炸 动画 。 


对 象 , 也 记录 着 它 在 屏幕 中 的 x, y 坐标 。 这 样 在 处 理 碰撞 的 时 候 通 过 
象 就 可 以 计算 出 碰撞 的 结果 ， 从 而 得 到 碰撞 的 敌 机 对 象 并 播放 死亡 


游戏 过 程 中 每 隔 3 秒 添 加 一 架 敌 机 ， 玩 家 按 空 格 键 发 射 子 弹 并 初始 化 其 位 置 坐标 在 玩 

















家 飞机 前 方 。 在 定时 导 


了 件 中 不 断 更 新 游戏 背景 图 片 的 位 置 ， 下 移 5 像素 ， 实 现 向 下 滚动 效 


果 ， 同 时 更 新 每 发 子弹 位 置 (每 次 上 移 1 像素 )， 更 新 敌 机 位 置 〈 每 次 1 像素 )， 最 后 检测 


子弹 与 敌 机 的 碰撞 。 


这 样 在 处 理 碰 撞 的 时 候 其 实 就 是 每 一 颗 子 弹 的 矩形 区 域 与 每 一 架 敌 机 的 矩形 区 域 的 
碰撞 。 通 过 遍历 子弹 对 象 与 敌 机 对 象 就 可 以 计算 出 碰撞 的 结果 ， 从 而 得 到 碰撞 的 敌 机 对 象 





并 播放 死亡 爆炸 动画 
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游戏 关键 技术 一 碰撞 检测 


我 们 在 游戏 开发 中 总 会 遇 到 这 样 那样 的 碰撞 ， 并 且 会 很 频繁 地 去 处 理 这 些 碰撞 ， 这 也 




















是 游戏 开发 的 一 种 基本 的 算法 。 常 见 碰撞 算法 是 矩形 碰撞 、 圆 形 碰撞 、 像 素 碰 撞 ， 和 矩形 碰 
撞 用 得 最 多 。 
? 14.3.1 ”矩形 碰撞 





小 相 


假如 把 游戏 中 的 角色 统称 为 一 个 一 个 的 Actor， 并 且 把 每 个 Actor 框 成 一 个 与 角色 大 
等 的 矩形 框 ， 那 么 在 游戏 中 每 次 的 循环 检查 就 是 检查 围绕 每 个 Actor 的 矩形 框 之 间 是 





否 发 生 了 交错 。 为 了 简单 起 见 ， 我 们 就 拿 一 个 主角 与 一 个 Actor 来 分 析 ， 其 他 的 可 以 类 比 。 


从 


-个 主角 与 一 个 Actor 的 碰撞 其 实 就 成 了 检测 两 个 矩形 是 否 发 生 了 交集 。 


第 一 种 方法 : 
我 们 可 以 通过 检测 一 个 矩形 的 4 个 顶点 是 否 在 另外 一 个 矩形 的 内 部 来 完成 ， 简 单 地 设 
-个 Actor 类 : 


Var Actor = function (x, y, wh) { 
Ehis. x = x? 


this.y = y; 
this.w = Ww;// 宽 度 
this.h = h; // 高 度 
} 

检测 的 处 理 为 : 


Actor.prototype. isCollidingwith = function ( px , py){ 
if(px >this.x&& px < this.x + this.w 
&& px >this.y&& py <this.y + this.h) 
return true; 
Shse 
return false; 
BE 
Actor.prototype. isCollidingWwith = function ( another) { //another Actor 
if(isCollidingWith (another.x,another.y) 
11iscollidingwith (another.x+ another.w,another.y) 
11iscollidingwith (another.x,another.y+tanother.h) 
11iscollidingwith (another.x+another.w,another.y+another.h) 
return true; 
else 
return false; 
} 


以 上 处 理 运行 应 该 是 没有 什么 问题 的 ， 但 是 没有 考虑 到 运行 速度 ， 而 游戏 中 需要 大 量 


的 碰撞 检测 工作 ， 所 以 要 求 碰撞 检测 要 尽量 快 。 
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第 二 种 方法 : 
我 们 从 相反 的 角度 考虑 ， 以 前 是 想 什 么 时 候 相 交 ， 现 在 我 们 处 理 什么 时 候 不 会 相交 ， 


可 以 处 理 4 条 边 , 左边 a 矩形 的 右边 界 在 b 甜 形 的 左边 界 以 外 , 同 理 , a 的 上 边界 需要 在 b 
的 下 边界 以 外 ， 四 边 都 判断 ， 则 可 以 知道 a 是 否 与 b 相交 ， 示 意图 见 图 14-4。 

















图 14-4 ”矩形 检查 


代码 如 下 : 


* ax 一 一 a 扼 形 左上 角 x 坐标 
* ay 一 一 a 矩形 左上 角 Y 坐标 
* aw 一 一 a 矩形 宽度 
* ah 一 一 a 矩形 高 度 
* bx 一 一 b 矩形 左上 角 工 坐标 
* by 一 一 b 矩形 左上 角 y 坐标 
* bw- 一 一 b 矩形 宽度 
* bh 一 一 b 矩形 高 度 


function isColliding( ax, ay, aw, ah, bx, by, bw, bh) { 
if(ay > by + bh || by > ay + ah 
I| ax>bx+bw || bx > ax + aw) 
return false; 
else 
return true; 
} 


此 方法 比 第 一 种 简单 且 运 行 快 ， 本 雷电 飞机 射击 游戏 采用 此 方法 检测 。 
第 三 种 方法 : 
这 种 方法 其 实 可 以 说 是 第 二 种 方法 的 一 个 变异 ， 我 们 可 以 保存 两 个 矩形 的 左上 和 右 下 














两 个 坐标 的 坐标 值 ， 然 后 对 比 两 个 坐标 就 可 以 得 出 两 个 矩形 是 否 相 交 。 这 应 该 比 第 二 种 更 
优越 一 点 。 


/* 

* rect1[0] : 矩形 1 左上 角 x 坐标 
* rect1[1] : 矩形 1 左上 角 y 坐标 
* rect1l[2] : 矩形 1 右 下 角 zx 华 标 


关 


EGGCLETTSI 
rect2[0]: 
Tect2 
rect2[2]: 
roct2l31s 


闫 美 美 关 


矩形 1 右上 角 Y 坐标 
矩形 2 左上 角 太 坐标 
拢 形 2 左上 角 Y 坐标 
逢 形 2 右 下 角 x 坐 标 
矩形 2 右上 角 y 坐标 


function IsRectCrossing ( rectl[], 
if (rectl[0] > rect2[2]) 


SEEectLI21] 


Frect2 [0]) 


< 
a Mroct1llll > rect2t3y 
< 


if (rectl[3] 


Frect2 [1]) 


return true; 


} 


return 
return 
return 
return 


这 种 速度 应 该 很 快 了 ， 推 荐 使 用 这 种 。 
14. 3. 2. . 圆 形 碰撞 nn 
现在 介绍 一 种 测试 两 个 对 象 边界 是 吾 重 和 


象 半径 的 和 的 大 小 ， 很 快 实 现 这 种 检测 。 


了 碰撞 。 


为 了 计算 半径 ， 就 可 以 简单 的 取 高 度 


代码 如 下 : 


function isColliding( ax, ay, aw, 
(Math.max(aw, ah)/2 + 1); 
(Math.max (bw, bh)/2 + 1); 
Var FrSquard = rl * rl; 


Var TL [= 
War T2 = 


Var anrSquard = r2* r2; 


var disx 
Var disY 
if((disx 


a = DX 


= ay - by; 
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rect2[]) { 
false; 
false; 
false; 
false; 


。 可 以 通过 比较 两 个 对 象 间 的 距离 和 两 个 对 


如 果 它们 之 间 的 距离 小 于 半径 的 和 ， 就 说 明 产 生 


或 者 宽度 的 一 半 作 为 半径 的 值 。 


ahr "bry by bw ‘bay 


* disX) + (disY * disY) < (rsquard + anrsquard)) 


return true; 


else: 


return false; 


这 种 方法 类 似 于 圆 形 碰撞 检测 ， 处 理 两 个 圆 的 碰撞 处 理 就 可 以 用 这 种 。 
?14.3.3 像素 碰撞 


























于 游戏 中 的 角色 的 大 小 往往 是 以 一 个 刚刚 能 够 将 其 包围 的 矩形 区 域 来 表示 的 ， 如 图 


14-5 所 示 ， 昌 然 两 个 卡通 人 物 并 没有 发 生 真 正 的 碰撞 ， 但 是 矩形 碰撞 检查 的 结果 是 它们 发 


生 了 碰撞 。 
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J 
图 14-5 拢 形 检查 


如 果 使 用 像素 检查 ， 往 往 会 把 精灵 的 背景 颜色 设置 成 相同 的 颜色 而 且 是 最 后 图 片 里 面 
很 少 用 到 的 颜色 ， 然 后 碰撞 检查 的 时 候 就 仅仅 判断 两 个 图 片 除了 背景 色 外 的 其 他 像素 区 域 
是 否 发 生 了 重合 的 情况 ， 如 图 14-6 所 示 ， 虽 然 两 个 图 片 的 矩形 发 生 了 碰撞 ， 但 是 两 个 卡通 
人 物 并 没有 发 生 真 正 的 碰撞 ， 这 就 是 像素 检查 的 好 处 ， 但 是 缺点 就 是 计算 复杂 ， 浪 费 大 量 
的 系统 资源 ， 因 此 一 般 如 果 没 有 特殊 要 求 ， 都 尽量 使 用 矩形 检查 碰撞 。 



































图 14-6 像素 检查 
以 上 只 是 总 结 了 几 种 简单 的 方法 ， 当 然 其 实在 游戏 中 熟练 地 运用 才 是 最 重要 的 ， 在 





HTMLS5 游戏 中 差不多 以 上 几 种 基本 够 用 了 ， 当 然 可 能 有 些 游戏 需要 比 以 上 更 复杂 的 算法 ， 
例如 如 果 一 个 对 象 速度 足够 快 ， 可 能 只 经 历 一 步 就 穿越 了 一 个 本 该 和 它 发 生 碰 撞 的 对 象 ， 
如 果 要 考虑 这 种 的 话 就 要 根据 它 的 运动 路 径 来 处 理 。 还 有 可 能 碰 到 不 同 的 边界 发 生 不 同 的 
行为 ， 这 就 要 具体 地 对 碰撞 行为 进行 解剖 ， 然 后 具体 处 理 。 


区 可 雷电 飞机 游戏 设计 的 步骤 
? 14.4.1 设计 子弹 类 


创建 一 个 Bullet 类 ， 用 于 表示 子弹 ， 实 现 子弹 坐标 更 新 ， 绘 制 子弹 动画 效果 并 上 移 1 
像素 。 子 弹 是 由 4 帧 组 成 的 ， 每 10 个 时 间 间 隔 〈 每 个 间隔 为 1000/60=16.67 毫秒 ) 换 
一 帧 。 


/7 子弹 类 


Var Bullet = function (image, x, y) { 














this.image = image; 


this.x = XxX; 
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this.y = y; 
this.width = image.width/4; 
this.height = image.height ; 


this.frm = 0; // 当 前 是 第 几 帧 
this.dis = 0; // 多 少时 间 间 隔 


] 7 
检测 点 (x, y) 是 否 在 子弹 区 域内 ， 本 游戏 没有 使 用 。 





Bullet .prototype.testPoint = function (x, y) { 
Var betweenX = (x >= this.x) && (x <= this.x + this.width); 
Var betweenY = (y >= this.y) && (y <= this.y + this.height); 
return betweenX && betweenYy; 

] 7 


move 改变 子弹 位 置 : 


Bullet.prototype.move = function (dx, dy) { 
this.x += dx; 
this.y += dy; 

] 7 


draw 绘制 子弹 动画 效果 并 上 移 1 像素 。 每 10 个 间隔 换 一 帧 ， 子 弹 共 4 帧 〈 如 图 14-7 
所 示 )。 子 弹 坐 标 更 新 主要 修改 y 坐标 〈 重 直方 向 ) 值 ， 每 次 1 像素 。 当 然 也 可 以 修改 x 
坐标 (水 平方 向 ) 值 ， 这 里 为 了 简单 化 没有 修改 x 坐标 值 〈 水 平方 向 )。 


RM ~ 


图 14-7 子弹 图 片 


Bullet .prototype.draw = function (ctx) { 
ctx.save(); 
ctx.translate (this.x, this.y); 
ctx.drawImage (this.image, this.frm*this.width, 0, this.width, this.height, 
0，0，this.width，this.height);// 绘 制 子弹 对 应 this .frm 帧 
ctx.restore(); 
this.y-——; // 上 移 1 像素 
Els Gisti 
if (this.dis >= 10) {//10 个 间隔 换 一 帧 
this.dis = 0; 
this .Erm++7 
if (this.frm >= 4) this.frm = 0; 


下 
hitTestObject 判断 子弹 与 飞机 是 否 碰撞 : 
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Bullet.prototype.hitTestobject = function (planobj) { 
if(isColliding (this.x,this.y,this.width,this.height, 
planobj .x,planobj .y, planobj .width,planobj .height) ) // 发 生 磁 撞 
return true; 
else 
return false; 
} 


isColliding 全 局 函数 是 前 面 分 析 的 第 二 种 碰撞 检测 方法 : 


function isColliding( ax, ay, aw, ah, bx, by, bw, bh) 


{ 
if(ay > by + bh || by > ay + ah 
I| ax > bxz+bw || bx > ax + aw) 
return false; 
else 
return true; 
} 






?14.4.2 设计 飞机 类 
和 项 目 中 创建 一 个 Plan 类 ， 用 于 

能 ， 功 能 与 子弹 类 相似 。 
构造 函数 中 image 是 飞机 图 片 ，(x, y) 是 飞机 位 置 坐标 ， 而 最 后 一 个 参数 n 是 本 飞机 图 

是 几 帧 动画 ， 例 如 己方 飞机 是 6 帧 动画 ， 敌 机 是 2 帧 动画 (如 图 14-8 所 示 )。 


六 蔗 荆 ， 中 


图 14-8 玩家 飞机 和 政 机 图 


示 敌 机 和 己方 的 飞机 ， 





实现 飞机 坐标 更 新 、 绘 制 功 


Var Plan = function (image，X，Y，n) { 
this.image = image; 
Ehis=x = 
EDLsmy = 
this.originx = x; 
this.originY = y; 


this.width = image.width / n; // 每 帧 飞机 宽度 
this.height = image.height; // 每 帧 飞机 高 度 
this.frm = 07 
this.dis = 0; 


this.n = n; 
}; 
Plan.prototype.testPoint = function (x, y) { 
Var betweenxX = (x >= this.x) && (x <= this.x + this.width); 
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Var betweenY = (y >= this.y) && (y <= this.y + this.height); 
return betweenX && betweenY7 
] 
Plan.prototype.move = function (dx, dy) { 
this.x 4= dx; 
this.y += dy; 
}; 
Plan.prototype.Y = function ( ) { 
return this.y; 
] 7 


draw (cbo 不 断 下 移 地 画 飞机 ， 同 时 水 平方 向 也 有 位 移 ， 采 用 正弦 移动 ; 


Plan.prototype.draw = function (ctx) { 

ctx.save(); 

ctx.translate (this.x, this.y); 

ctx.drawImage (this.image, this.frm*this.width, 0, this.width, this.height, 
0, 0, this.width, this.height); 

ctx.restore(); 


this.y++; // 下 移 1 像素 

this.x = this.originx + 20 * Math.sin(Math.PI / 100 * this.y); 
// 水 平方 向 正弦 移动 

this.dis+t+; 


if (this.dis >= 3) {//3 个 间隔 换 图 
this.dis = 0; 
this.frmt++; 
if (this.frm >= this.n) this.frm = 0; 


ys 
draw2 (ctx) 原 地 不 动画 飞机 ， 因 为 己方 飞机 是 人 工控 制 移 动 的， 所 以 





Plan.prototype.draw2 = function (ctx) { 
ctx.save(); 
ctx.translate (this.x, this.y); 
ctx.drawImage (this.image, this.frm *this.width, 0 , this.width, this.height, 
0, 0, this.width, this.height); 
ctx.restore(); 
this.dist+; 
if (this.dis >= 3) {//3 个 间隔 换 图 
this.dis = 0; 
this .Erm++7 
i£f (this.frm >= this.n) this.frm = 0; 


}; 
// 飞 机 之 间 碰撞 检测 
// 如 
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Plan.prototype.hitTestObject = function (planobj) { 
if(isColliding (this.x,this.y,this.width,this.height, 
planobj .x,planobj .y, planobj .width,planobj .height)) // 发 生 碰撞 
return true; 
else 
return false; 





图 14-9 敌 机 爆炸 时 的 6 帧 图 片 


// 爆 炸 动画 
var Bomb= function (image, x, y) { 
this.image = image; 
this R= Xt 
this.y = y; 
this.width = image.width/6; 
this.height = image.height ; 
this.frm = 0; 
this.dis = 0; 
] 7 
Bomb .prototype.draw2 = function (ctx) { 
ctx.save(); 
ctx.translate (this.x, this.y); 
if (this.frm >= 6) return ;//6 帧 绘制 就 结束 了 
ctx.drawImage (this.image, this.frm *this.width, 0 , this.width, this.height, 
0, 0, this.width, this.height); 
ctx.restore(); 


this.dist+; 

if (this.dis >= 10) {//10 个 间隔 换 图 
this.dis = 0; 
this .frm++7 


















用 于 实现 游戏 背景 界面 ， 加 
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Var canvas = document .getElementById ("myCanvas"); 
Var context = canvas.getContext ("2d"); 


document .addEventListener ("keydown", onkeydown); 


var plans = []; // 敌 机 对 象 数组 
var bullets = []; // 子 弹 对 象 数 组 
var bombs = []; // 爆 炸 对 象 数 组 


Var score=0; 

var overflag = false; // 游 戏 是 否 结束 ，true 为 结束 
Var mBitposY0，mBitposY17 

/** 屏幕 的 宽 和 高 * */ 

var mScreenWidth = 320; 

var mScreenHeight = 480 


var myplane;// 己 方 飞机 

Var image = new Image(); 
Var image2 = new Image(); 
var image3 new Image(); 


Var image4 new Image () 7 
Var image5 = new Image(); 

// 以 下 游戏 背景 的 两 张 图 片 
Var background0 = new Image(); 
background0.src = "map 0.png"; 
Var backgroundl = new Image(); 


backgroundl.src = "map 1.png"; 


init0 初 始 化 游戏 背景 的 两 张 图 片 的 初始 位 置 ，updateBg0 通 过 这 两 张 背 景 图 片 的 不 断 
下 移 和 切换 实现 游戏 背景 动态 移动 的 效果 。 


function init() { 
/sz 游戏 背景 * */ 
/** 第 一 张 图 片 紧 贴 在 屏幕 (0, 0) 点 ， 第 二 张 图 片 在 第 一 张 图 片上 方 * */ 
mBitposY0 = 0; 
mBitposYl = -mScreenHeight; 
} 
function updateBg() { 
/** 更 新 游戏 背景 图 片 实现 向 下 滚动 效果 **/ 
mBitposY0 += 57 
mBitposY1 += 57 
if (mBitposY0 == mScreenHeight) { 
mBitposY0 = -mScreenHeight; 
} 
if (mBitposYl == mScreenHeight) { 
mBitposYl = -mScreenHeight; 


} 
image.src = "plan.png";// 己 方 飞机 的 图 片 
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image.onload = function () { 

}; 

image2.src = "bomb .png";// 爆 炸 图 片 
image2.onload = function () { 

] 7 

image3.src = "enemy.png";// 敌 机 图 片 


图 片 加 载 成 功 后 ， 通 过 定时 每 3 秒 产生 1 架 敌 机 ， 在 另 一 个 定时 器 中 不 断 更 新 背景 图 
片 的 位 置 ， 画 己方 飞机 和 政 机 ， 并 检测 敌 机 是 否 碰 到 玩家 自己 的 飞机 《〈 则 游戏 结束 ) 或 者 
子弹 碰 到 敌 机 ， 最 后 绘制 爆炸 对 象 ， 实 现 游戏 逻辑 。 

如 果子 弹 碰撞 到 敌 机 ， 则 产生 爆炸 对 象 ， 从 敌 机 数组 plans 中 删除 该 敌 机 ， 从 子弹 数 
组 bullets 中 删除 碰撞 的 子弹 。 如 果 没 击 中 敌 机 ， 再 判断 子弹 是 否 飞 出 屏幕 上 方 ， 飞 出 屏幕 
上 方 则 从 数组 bullets 中 删除 碰撞 的 子弹 。 


image3.onload = function () { 
myplane = new Plan(image，300 * Math.random()，400，6); //6 幅 图 片 
init (); // 初 始 化 背景 地 图 位 置 
Plan interval = setInterval (function () { 
plans.push (new Plan (image3, 300 * Math.random(), 20 * Math.random(), 
2) ); //2 幅 图 片 
}，3000); //3 秒 产 生 1 架 敌 机 
setInterval (function () { 
context.clearRect (0, 0, 320, 480); 
// 画 地 图 
//context .drawImage (background, 0, 0); 
context .drawImage (background0, 0, mBitposY0); 
context .drawImage (backgroundl, 0, mBitposY1); 
updateBg () ; // 更 新 背景 图 片 位 置 
// 画 己方 飞机 
if (!overflag)// 游 戏 没有 结束 
myplane.draw2 (context); // 原 地 不 动 
// 画 方 飞机 
for (var i = plans.length - 1; i >= 0; i--) { 
if (plans[i].Y() > 400)  // 敌 机 飞 到 底部 则 消失 
plans.splice(i，1); ”// 删 除 敌 机 
slse 


plans[i] .draw (context); 


// 画 子弹 
for (var i = bullets.length - 1; i >= 0; i--) { 
if (bullets[i].Y() < 0) 
bullets.splice (i，1); // 删 除 子弹 
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else 
bullets [il .draw (context); 
} 
// 碰 撞 检测 
// 判 断 敌 机 是 否 碰 到 玩家 自己 飞机 
for (var i = plans.length - 1; i >= 0; i--) { 
el = plans[i]; 
if (el != null && myplane != null && myplane.hitTestObject(el)) { 
clearInterval (plan_ interval) ; // 清 除 定时 器 ， 不 再 产生 敌 机 
plans.splice(i, 1); // 删 除 敌 机 
bombs .push (new Bomb (image?2, myplane.x, myplane.y)); 
//bomb interval=setInterval (function () { 
KR bomb .draw2 (context); // 原 地 不 动 
/JIE L1000° /1 60)7 
message_txt.innerHTML = " 敌 机 碰 到 玩家 自己 飞机 , 游戏 结束 "; 


overflag = true; 


// 判 断 子弹 是 否 碰 到 政 机 
for (var j = bullets.length - 1; j >= 0; j--) { 
Var bl = bullets[j]; 
for (var i = plans.length - 1; i >= 0; i--) { 
el = plans[i]l; 
if (el != null && bl != null && bl.hitTestobject (el))// 击 中 敌 机 
plans.splice(i, 1); /7 删除 敌 机 
bullets.splice (i, 1); // 删 除 此 颗 子 弹 
bombs .push (new Bomb (image2, bl.x, bl.y - 36)); 
message txt.innerHTML =" 敌 机 被 击 中 ， 加 20 分 "; 
score += 20; 


score txt.innerHTML = "分 数 : " + score + "分 "; 


// 画 爆炸 
for {var T= bombs. length — Ll; 1 3= 0 414==) 1 
if. (bombs[li].frm >= 6) 
bombs .splice (i，1); // 删 除 爆炸 
Slss 


bombs [i] .draw2 (context); 
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} 
}, 1000 / 60); 
}; 
image4.src = "bullet .png";// 子 弹 图 片 
image4.onload = function () { 
}; 


用 户 按键 控制 飞机 上 下 左右 移动 ， 以 及 空格 发 射 子弹 。onkeydown(e) 响 应 用 户 的 按键 

















function onkeydown (e) { 

if (e.keyCode==32) {// 空 格 
// 发 射 子弹 
bullets.push (new Bullet (image4, myplane.x, myplane.y-36));// 

jelse if (e.keyCode==37) {// 向 左 
myplane.move (-10,0); 

}else if (e.keyCode==39) {// 向 右 
myplane.move (10,0); 

Jelse if (e.keyCode==38) {// 向 上 
myplane.move (0,-10); 

}jelse if (e.keycode==40) {// 向 下 


myplane.move (0,10); 





<!DOCTYPE html> 

<html> 

<head> 

<title> 飞 机 大 战 2017</title> 

<meta charset="utf-8"> 

</head> 

<body> 

<canvas id="myCanvas" width="320" height="480" style="border:solid"> 
你 的 浏览 器 不 支持 canvas 画布 元 素 ， 请 更 新 浏览 器 获得 演示 效果 。 
</canvas> 

<div id="message txt" style="display:block;"> 飞 机 大 战 </div> 
<div id="score txt" style="display:block;"> 分 数 : 0 分 </div> 
</body> 

</html> 


至 此 我 们 完成 雷电 飞机 射击 游戏 的 开发 ， 运 行程 序 效果 如 图 14-10 所 示 。 
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敌 机 被 击 中 ， 加 20 分 





分 数 ，60 分 


图 14-10 雷电 飞机 射击 游戏 的 最 终 效果 











Flappy Bird 游戏 介绍 


Flappy Bird 〈 又 称 笨 鸟 先 飞 ) 是 一 款 来 自 iOS 平台 的 小 游戏 ， 该 游戏 是 由 一 名 越南 游 
戏 制作 者 独自 开发 而 成 的 ， 玩 法 极为 简单 ， 游 戏 中 玩家 必须 控制 一 只 胖乎乎 的 小 岛 ， 跨 越 
由 各 种 不 同 长 度 水 管 所 组 成 的 障碍 。 此 游戏 上 手 容 易 ， 但 是 想 通关 可 不 简单 。 

本 章 这 款 电脑 版 FlappyBird 游戏 中 , 玩家 只 需要 用 空格 键 /鼠标 来 操控 ,需要 不 断 控制 
小 鸟 的 飞行 高 度 和 降落 速度 ， 让 小 鸟 顺 利 地 通过 面 面 右 端的 通道 ， 如 果 玩 家 不 小 心 碰 到 了 
水 管 的 话 ， 游 戏 便 宣告 结束 。 单 击 屏幕 或 按 空 格 键 ， 小 鸟 就 会 往 上 飞 ， 不 断 地 单 击 或 按 空 
格 键 就 会 不 断 地 往 高 处 飞 。 松 开 鼠 标 或 空格 键 则 会 快速 下 降 。 小 鸟 安全 穿 过 一 个 柱子 且 不 
撞 上 玩家 就 得 1 分 ,当然 撞 上 就 直接 游戏 结束 。 游 戏 运 行 初始 界面 和 游戏 过 程 界面 如 图 15-1 


CA 


we 


Si 
ae] 
| 


(a) 初始 界面 (b) 游戏 过 程 界面 





图 15-1 Flappy Bird 游戏 运行 初始 界面 和 游戏 过 程 界面 
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于 中 Flappy Bird 游戏 设计 的 思路 






游戏 程序 中 用 到 背景 (bg.png)、 小 鸟 (bird.png)、 上 下 管道 (obs.png)、 游 戏 结束 
面 (overpng) 和 游戏 开始 画面 的 图 片 〈startjpg) 等 分 别 使 用 图 15-2 所 示 的 图 片 。 





ce 各 | [LamelouEN 


bg.png bird.png obs.png overpng start.jpg 


图 15-2 ”Flappy Bird 素材 图 片 








? 15.2.2 ”游戏 实现 的 原理 

游戏 设计 中 采用 类 似 雷 电 飞机 射击 游戏 的 方法 ， 背 景 障碍 物 (管道) 在 不 断 左 移 ， 小 
鸟 位 置 x 坐标 不 变 仅仅 能 上 下 移动 。 为 了 简化 游戏 难度 ， 我 们 将 上 下 管子 的 间距 设置 成 一 
样 大 小 ;采用 两 个 定时 器 ， 其 中 一 个 定时 器 每 隔 2 秒 产生 一 个 新 的 障碍 物 〈 管 道 ) 并 加 入 
到 障碍 物 数组 obsList 中 。 当 数组 obsList 首 个 元 素 obsList[0] 移 出 游戏 画面 时 则 从 数组 中 
删除 。 

另 一 个 定时 器 完成 游戏 画面 和 游戏 多 辑 〈 磁 撞 及 鼠标 单 击 检测 )， 在 每 隔 20 毫秒 重 画 
游戏 界面 时 ， 根 据 障碍 物 数 组 obsList 绘制 游戏 界面 存在 的 各 个 障碍 物 。 由 于 每 次 重 画 时 ， 
obsList 中 各 个 障碍 物 x 坐标 减少 2， 从 而 给 玩家 一 种 管子 不 断 前 移 的 感觉 。 

同时 根据 玩家 是 否 单 击 屏 幕 来 移动 小 鸟 位 置 并 判断 是 否 碰 到 了 水 管 ， 如 果 碰 到 或 小 鸟 
落地 则 游戏 结束 。 


到 Flappy Bird 游戏 设计 的 步骤 

游戏 使 用 三 个 类 : Bird 类 ，Obstacle 类 ，FlappyBird 类 (游戏 运行 的 主要 函数 )。 
?15。 3. 1 . 设 役 计 - Bird 类 \ 小 岛 类 ) tet 上 ttt 上 上 tt 上 i 上 上. 

小 鸟 飞行 是 由 两 帧 组 成 的 图 片 ， 分 别 对 应 “ up” 和 “down” 两 种 状态 。 




















function Bird(x, y, image) { 
this.x = x; 
this.y = y; 
this.width = image.width / 2; // 每 帧 是 图 片 的 一 半 大 小 
this.height = image.height; 
this.image = image; 
this.draw = function(context, state) { 


if (state === "up") 
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context .drawImage (image, 0, 0, this.width, this.height, this.x, 
this.y，this.width，this.height) ;// 绘 制 向 上 飞 "up" 状 态 帧 (第 1 帧 ) 
elsef 
context .drawImage (image, this.width, 0, this.width, this.height, 
this.x, this.y，this.width，this.height);// 绘 制 向 下 飞 "down "状态 帧 (第 2 帧 ) 


] 7 





设计 Obstacle 类 ( 管 


管道 障碍 物 是 由 两 帧 组 成 的 图 片 ， 分 别 是 管道 头 向 上 “up” 和 头 向 下 “down ”两 种 状态 。 


function Obstacle(x, y, h, image) { 





this,.x = Rr 
this.y = y, 
this.width = image.width / 2, 
this .height = h, 
this.flypast=false;// 没 被 小 鸟 飞 过 
this.draw = function(context, state) { 
if (state === "up") { 
context .drawImage (image, 0, 0, this.width, this.height, this.x, 
this.y，this.width，this.height) ;// 绘 制 管道 头 向 上 帧 〈 一 对 管道 中 的 下 管道 
} else { 
context .drawImage (image, this.width, image.height -this.height, 
this.width, this.height, this.x, this.y, this.width, this.height);// 绘 制 管 道 头 
向 下 帧 (一 对 管道 中 的 上 管道 ) 
} 


] 7 






FlappyBird 类 包括 游戏 主要 参数 及 运行 时 需要 的 函数 ， 变 化 参数 可 以 改变 游戏 难 / 
FlappyBird 类 的 函数 功能 如 下 : 
CreateMap: function(): 绘制 画布 。 
CreateObs: function(): 创造 障碍 物 。 
DrawObs: function(): 绘制 障碍 物 。 
CountScore: fanction0: 判断 是 否 启动 记分 器 。 
ShowScore: function(): 显示 分 数 。 
CanMove: function(): 判断 是 否 可 以 移动 及 游戏 是 否 结束 。 
CheckTouch: function(): 判断 是 否 触摸 。 
ClearScreen: function(): 清 屏 。 
ShowOver: function(): 显示 游戏 结束 。 
具体 代码 如 下 : 


Dirds. ma 

ele Ee 

obs: null, 
obsbist: [li 
mapWidth: 340, 
mapHeight: 453, 
StartX 907 
Startr: 225r 
obsDistance: 100, 
obsSpeed: 2, 
obsInterval: 2000, 
upSpeed: 8, 
downspeed: 3, 

56, 

score: 0, 


line: 


touch: false, 
gameOver: false, 
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function FlappyBird() {} 
FlappyBird.prototype = { 


// 小 鸟 

// 背 景 图 

// 障 碍 物 

// 管 道 障碍 物 数组 

// 画 布 〈 游 戏 画 面 ) 宽度 
// 画 布 〈 游 戏 画 面 ) 高 度 
// 小 鸟 起 始 位 置 


// 上 下 障 但 物 距离 ， 也 就 是 小 鸟 可 以 飞 过 的 空 阶 
// 障 但 物 移动 速度 

// 制 造 障碍 物 间隔 ms 

// 上 升 速度 

// 下 降 速度 

// 地 面 高 度 

// 得 分 

// 是 否 触摸 ( 单 击 鼠 标 》 

// 游 戏 结束 标志 


CreateMap 函数 绘制 游戏 的 画面 ， 画 面 由 背景 、 小 鸟 和 障碍 物 组 成 。 由 于 管道 障碍 物 
是 成 对 出 现 的 ， 每 次 生成 两 个 管道 obsl 和 obs2， 并 加 入 到 管道 障碍 物 数 组 obsList[] 。 


CreateMap: function () {// 绘 制 画 布 (游戏 画面 


// 背 景 
this.bg = new Image(); 
this.bg.src = "img/bg.png"; 


Var startBg new Image () 7 
startBg.src = "img/start.jpg"; 
// 由 于 Image 异步 加 载 ， 在 加 载 完 成 时 再 绘制 图 像 


startBg.onload = function(){ 


c.drawImage (startBg, 0, 0); 
过 
// 小 鸟 
Var image = new Image(); 
image.src = "img/bird.png"; 


image.onload = function(){ 
this.bird = new Bird(this.startx, this.startY, image); 
//this.bird.draw l(c, 
} .bind (this); 


"down") 


// 管 道 障碍 物 
this.obs = new Image(); 


this.obs.src = "img/obs.png"; 
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this.obs.onload = function() { 
var h = 100; // 默 认 第 一 障碍 物 上 管道 高 度 为 100 
Var h2 = this.mapHeight - h - this.obsDistance; 
Var obsl = new Obstacle (this.mapWidth, 0, h, this.obs); 
Var obs2=new Obstacle (this.mapWidth, this.mapHeight-h2,h2-this.line, 
this.obs); 
this.obsList.push (obs1);// 将 一 对 管道 加 入 obsList 数组 
this.obsList.push (obs2); 

}.bind (this); 

}, 


CreateObs 函数 每 次 生成 两 个 管道 obs1 (上 管道 ) 和 obs2〈 下 管道 )， 并 加 入 到 管道 障 
得 物 数组 obsList[]， 如 果 障 碍 物 已 经 出 了 画面 则 从 数组 中 删除 ， 这 样 重新 绘制 时 就 不 会 


显示 。 


Createobs: function() { 
// 随 机 产生 障碍 物 上 管道 高 度 
var h = Math.floor (Math.random() * (this.mapHeight - this.obsDistance 
- this.line)); 
var h2 = this.mapHeight - h - this.obsDistance; 
var obsl = new Obstacle (this.mapWidth，0，h，this.obs);// 上 管道 
var obs2=newObstacle (this.mapWidth, this.mapHeight -h2, h2-this.line, 
this .obs) ;// 下 管道 
this.obsList.push (obs1); 
this.obsList.push (obs2); 


// 移 除 越界 障碍 物 
if (this.obsList[0] .x < -this.obsList[0] .width)// 如 果 障 碍 物 已 经 出 了 画面 
this.obsList.splice(0, 2); // 从 数组 中 删除 


}, 
Drawobs: function() { // 绘 制 障碍 物 
c.fillstyle = "#00ff00"; 
for (var i = 0; i < this.obsList.length; i++) { 
this.obsList[i] .x -= this.obsSpeed; 
(2 
this.obsList[i] .draw(c, "up"); // 下 管道 
else 
this.obsList[i] .draw(c, "down"); // 上 管道 


}, 


CountScore() 函 数 计 算得 分 ， 由 于 小 鸟 x 位 置 固定 ( 即 this.startX=90)，2 秒 产 生 一 个 
新 障碍 物 , 而 每 20 毫秒 前 个 障碍 物 就 移动 2 像素 ， 所 以 障碍 物 之 间 间 隔 为 200 像素 。 小 鸟 
x 化 标 位 置 是 90， 所 以 当 新 的 障碍 物 到 小 鸟 位 置 时 ， 前 一 个 障碍 物 到 -110 位 置 (已 经 出 了 
画面 )， 所 以 已 从 数组 中 删除 了 ， 到 小 鸟 跟前 的 总 是 obsList[0]。 
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CA 
if (this.obsList[0] .x+this.obsList[0] .width<this.startX&g&this.obsList[0]. 
flypast==false) { 
// 小 鸟 坐标 超过 obsList[0] 障 碍 物 
this.score += 1; 
this.obsList[0] .flypast=true; 


CountScore: function() 


// 得 分 
//obsList[0] 障 碍 物 被 飞 过 了 


}, 
ShowScore: function() { // 显 示 分 数 


c.strokeSstyle = "#000"; 
.linewidth = 1; 
.fillstyle = "#fff" 


.fillText (this.score, 10, 50); 


可 
三 
c.strokeText (this.score, 10, 50); 
}, 


CanMove 0 函数 实现 小 鸟 与 管道 的 碰撞 检测 。 这 里 使 用 矩形 碰撞 检测 原理 ， 这 在 第 14 
章 已 经 介绍 过 ， 判 断 小 鸟 所 在 图 形 憩 形 与 所 有 管道 障碍 物 矩 形 是 否 碰 措 。 


CanMove: function() { // 碰 撞 检测 
if (this.bird.y < 0 || this.bird.y > this.mapHeight - this.bird.height 
- this.line) { 
this .gameOver = true; 
} else { 
Var boundary = [{ 
Ks Ehissbird-xr 


vy thisibirdeYy 


this.bird.x + this.bird.width, 
this.bird.y 


XX: 


Y: 


this.bird.x, 
this.bird.y + this.bird.height 


this.bird.x + this.bird.width, 
this.bird.y + this.bird.height 


}] 727/ 小 鸟 所 在 图 形 矩 形 的 四 个 项 点 坐标 


for (var i = 0; i < this.obsList.length; i++) 
for (var Jj 


{// 所 有 管道 障碍 物 


OP < |) 


if (boundary[j] .x>= this.obsList[i] .x&&boundary[j] .x<=this.obsList[i] .x 
+ this.obsList[i] .widthg& boundary[j].y >= this.obsList[i].y && boundary[j].y 
<= this.obsList[i].y + this.obsList[i] .height)// 碰 撞 


{ 


true; / /游戏 结束 为 真 


this.gameOver = 


break; 
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if (this.gameOver) 


break; 


}, 


CheckTouch 0 函数 实现 检测 触摸 ( 单 击 鼠 标 )， 如 果 单 击 鼠 标 绘制 向 上 飞 “up” 状 态 帧 
(第 1 帧 )， 和 否则 绘制 向 下 飞 “down” 状 态 帧 〈 第 2 帧 )。 


CheckTouch: function() { // 检 测 触摸 ( 单 击 鼠标 ) 
EF (this.touch)y + 
this.bird.y -= this.upSpeed; 
this.bird.draw(c，"up");// 绘 制 向 上 飞 "up" 状 态 帧 (第 1 帧 ) 
} else { 
this.bird.y += this.downSpeed; 
this.bird.draw(c，"down") ;// 绘 制 向 下 飞 "down" 状 态 帧 (第 2 帧 ) 


}, 

Clearscreen: function() { // 清 屏 
c.drawImage (this.bg, 0, 0); 

}, 


ShowOver(0) 函 数 绘制 游戏 结束 画面 的 图 片 。 


ShowOver: function() { 
Var overImg = new Image(); 
overImg.src = "img/over.png";// 游 戏 结束 画面 的 图 片 
overImg.onload = function(){ 
c.drawImage (overImg, (this.mapWidth - overImg.width) / 2, 
(this.mapHeight - overImg.height) / 2 - 50); 
}.bind(this) 
return; 


i 


?15.3.4_ 主 程序 





Var canvas = document .getElementByYId ("canvVas") : 


Var c = canvas.getContext ("2d"); 

Var game = new FlappyBird(); 

var Speed = 20; // 背 景 移动 速度 即 更 新 速度 ，20 毫秒 
Var IsPlay = false; 

Var GameTime = null; 

Var btn start; 

window.onload = InitGame;  // 网 页 加 载 后 执行 


网 页 加 载 后 执行 InitGame0， 添 加 鼠标 按 下 、 松 开 、 单 如 











人 件 。 如 果 用 户 单 击 则 调用 
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RunGame(Speed) 开 始 游戏 。 


function InitGame() { 
c.font = "3em 微软 雅 黑 "; 
game .CreateMap (); 
canvas.onmousedown = function() { 
game.touch = true; 
| 
canvas.onmouseup = function() { 
game.touch = false; 
Es 
canvas.onclick = function() { 
if (!IsPlay) { 
IsPlay = true; 
GameTime = RunGame (Speed); 


} 

游戏 运行 函数 RunGame(speed) 产 生 2 个 定时 器 ，updateTimer 定时 器 实现 障碍 物 前 移 ， 
检测 是 否 碰撞 ， 如 果 碰 撞 游 戏 结束 ;检测 鼠标 单 击 ， 是 则 y 坐标 减少 且 显示 向 上 飞 图 片 ， 
否则 y 坐标 增加 且 显 示 向 下 飞 图 片 ， 最 后 显示 游戏 得 分 。 

obsTimer 定时 器 实现 每 2 秒 产生 新 障碍 物 〈 一 对 管道 )。 


function RunGame (speed) { // 游 戏 运行 函数 
var updateTimer = setInterval (function() { 
game .CanMove (); // 检 测 是 否 碰撞 ， 如 果 碰 撞 游 戏 结束 


if (game.gameOver) { 
game .ShowOver (); // 游 戏 结束 画面 
clearInterval (updateTimer) ;// 清 除 定时 器 


return; 
} 
game.ClearScreen (); // 清 屏 后 显示 背景 图 片 
game .DrawObs () / /障碍 物 前 移 2 像素 后 重 画 


// 检 测 鼠 标 单 击 ， 是 则 y 坐标 减少 上 且 显 示 向 上 飞 图 片 ， 否 则 y 坐标 增加 且 显 示 向 下 飞 图 片 
game .CheckTouch (); 


game.CountScore () :7 // 若 小 岛 通过 障碍 物 记分 
game.ShowScore (); // 显 示 分 数 
}, speed); 


var obsTimer = setInterval (function() {// 定 时 产生 新 障碍 物 (一 对 管道 
if (game.gameOver) { 
clearInterval (obsTimer); 
return; 
game .Createobs (); // 产 生 新 障碍 物 (一 对 管道 ) 
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}, game.obsInterval); /1/2 秒 钟 
1 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title>Flappy Bird</title> 
</head> 
<body> 
<canvas id="canvas" width="340" height="453" style="border:2px solid 
#000;background:#fff;"></canvas> 
<script src="bird.js" type="text/javascript"></script> 
</body> 
</html> 


至 此 我 们 完成 Flappy Bird 游戏 的 开发 ， 运 行 结束 画面 如 图 15-3 所 示 。 





图 15-3 ”Flappy Bird 游戏 结束 画面 
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中 国 象棋 





中 国 象棋 是 一 种 家 喻 户 晓 的 棋 类 游戏 , 它 的 多 变 吸 引 了 无 数 的 玩家 。 下 面 介绍 制作 “中 


罗 导 中国 象棋 介绍 


1. 棋盘 
棋子 活动 的 场所 叫 作 “棋盘 ?， 在 长 方形 的 平面 上 ， 绘 有 9 条 平行 的 竖 线 和 10 条 平行 
的 横 线 ， 它 们 相交 组 成 共 90 个 交叉 点 ， 棋 子 就 摆 在 这 些 交叉 点 上 。 中 间 第 5、 第 6 两 横 线 


之 间 未 画 竖 线 的 空白 地 带 称 为 “ 河 界 ”， 整 个 棋盘 就 以 “ 河 界 ” 分 为 相等 的 两 部 分 ， 两 方 将 
帅 坐 镇 ， 画 有 “ 米 ” 字 方 格 的 地 方 叫 作 “九宫 ”。 

2. 棋子 

象棋 的 棋子 共 32 个 ， 分 为 红 黑 两 组 ， 各 16 个 ， 由 对 弈 双方 各 执 一 组 ， 每 组 兵种 是 一 
样 的， 各 分 为 七 种 : 

红 方 ， 帅 、 仕 、 相 、 车 、 马 、 炮 、 兵 。 

黑 方 : 将 、 士 、 象 、 车 、 马 、 炮 、 卒 。 

其 中 帅 与 将 、 仁 与 士 、 相 与 象 、 兵 与 座 的 作用 完全 相同 , 仅仅 是 为 了 区 分 红 棋 和 黑 棋 。 

3. 各 棋子 的 走 法 说 明 

(1) 将 或 帅 

移动 范围 : 它 只 能 在 九宫 内 移动 。 

移动 规则 : 它 每 一 步 只 可 以 水 平 或 垂直 移动 一 点 。 

2 本 

移动 范围 : 它 只 能 在 九宫 内 移动 。 

移动 规则 : 它 每 一 步 只 可 以 沿 对 角 线 方向 移动 一 点 。 

(3) 象 

移动 范围 河 界 的 一 侧 。 

移动 规则 : 它 每 一 步 只 可 以 沿 对 角 线 方向 移动 两 点 ， 男 外 ， 在 移动 的 过 程 中 不 能 够 穿 











越 障碍 。 

(4) 马 

移动 范围 :任何 位 置 。 

移动 规则 : 每 一 步 上 只 可 以 水 平 或 垂直 移动 一 点 ， 再 按 对 角 线 方向 向 左 或 者 向 右 移动 。 
另外 ， 在 移动 的 过 程 中 不 能 够 穿越 障碍 。 

(3 








移动 范围 ;任何 位 置 。 
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移动 规则 : 
(6) 炮 
移动 范围 : 任何 位 置 。 

移动 规则 : 移动 起 来 和 车 很 相似 ， 但 它 必 须 跳 过 一 个 棋子 来 吃 掉 对 方 的 一 个 棋子 。 


=] 


以 水 平 或 垂直 方向 移动 任意 个 无 阻碍 的 点 。 











(7) 兵 
移动 范围 : 任何 位 置 。 
移动 规则 : 每 步 只 能 向 前 移动 一 点 。 过 河 以 后 ， 它 便 增加 了 向 左右 移动 的 能 力 ， 兵 不 


允许 向 后 移动 。 
4. 关于 胜 、 负 、 和 
对 局 中 ， 已 方 的 帅 〈 将 ) 被 对 方 棋子 吃 掉 ， 本 方 算 输 ， 对 方 赢 。 


中 国 象棋 设计 思路 





棋盘 表示 就 是 使 用 一 种 数据 结构 来 描述 棋盘 及 棋盘 上 的 棋子 ， 我 们 使 用 一 个 二 维 数组 
Map。 一 个 典型 的 中 国 象棋 棋盘 是 使 用 9X10 的 二 维 数组 表示 的 。 每 一 个 元 素 代表 棋盘 上 
的 一 个 交点 。 一 个 没有 棋子 的 交点 所 对 应 的 元 素 是 -1。 一 个 二 维 数 组 Map 保存 了 当前 棋盘 
的 布局 。 当 Map[x]J[y]=i 时 说 明 (x,y) 处 是 棋子 图 像 1, 否则 Map[x][y]=-1 处 为 空 (无 棋子 )。 

旦 序 中 下 棋 的 棋盘 界面 通过 drawImage0 函 数 在 一 个 Canvas 对 象 上 画 出 “棋盘 ,png” 图 片 。 

var qipan=document .getElementById ("qipan");// 棋 盘 

Var mycanvas=document .getElementById('myCanvas'); 

Var context = mycanVas .getContext ('2d"'); 

context .drawImage (qipan，0，0) ; # 画 棋盘 


W622 要 于 和 Re 
要 图 片 ,每 种 模子 图 案 和 棋盘 使 用 对 应 的 图 片 资源 如 图 16-1 所 示 。 游 











棋子 显示 需 
红 方 在 南 ， 黑 方 在 北 。 





图 16-1 棋子 图 片 资源 





第 16 章 中 国 象棋 255 








?16:23. 走 楼 规则 

对 于 象棋 来 说 ， 有 马 走 日 、 象 走 田 等 一 系列 复杂 的 规则 。 走 法 产生 是 博弈 程序 中 一 个 
相当 复杂 而 且 耗 费 运算 时 间 的 方面 。 不 过 ， 通 过 良好 的 数据 结构 ， 可 以 显著 地 提高 生成 的 

判断 是 否 能 走 棋 算法 如 下 : 

根据 棋子 名 称 的 不 同 ， 按 相应 规则 判断 : 

(1) 如 果 为 “车 ”， 检查 是 否 走 直线 ， 以 及 中 间 是 否 有 子 。 

(2) 如 果 为 “ 马 ”， 检查 是 否 走 “日” 字 ， 是 否 浆 脚 。 

(3) 如 果 为 “ 炮 ”， 检 查 是 否 走 直线 ， 判 断 是 否 吃 子 ， 如 果 吃 子 ， 则 检查 中 间 是 否 只 
有 一 个 棋子 ， 如 果 不 吃 则 检查 中 间 是 否 有 棋子 。 

(4) 如 果 为 “ 兵 ” 检查 是 否 走 直 线 ， 走 一 步 及 向 前 走 ， 根 据 是 否 过 河 ， 检 查 是 否 
横 走 。 

(5) 如 果 为 “将 ”检查 是 否 走 直线 ， 走 一 步 及 是 否 超 过 范围 。 

(6) 如 果 为 “ 士 "， 检查 是 否 走 斜 线 ， 走 一 步 及 是 否 超出 范围 。 

(7) 如 果 为 “ 象 ”， 检 查 是 否 走 “ 田 ” 字 ， 是 否 整 脚 ， 以 及 是 否 超出 范围 。 

如 何 分 辨 棋子 ? 程序 中 采用 了 棋子 对 象 chessName 属性 来 获取 。 

程序 中 IsAbleToPut(firstchess, x, 9) 函数 实现 判断 是 否 能 走 棋 返 回 逻辑 值 ， 这 些 代码 最 
复杂 。 其 中 参数 含义 如 下 : 

firstchess 代表 走 的 棋子 对 象 , 参数 x,y 代表 走 棋 的 目标 位 置 。 走 动 棋子 原始 位 置 Coldx， 
oldy) 可 以 通过 firstchess.pos.x 获取 原 x 坐标 oldx，firstchess.pos.y 获取 原 y 坐标 oldy。 

IsAbleToPut(firstchess, x, y) 函 数 实现 走 棋 规则 判断 : 

例如 “将 ”或 “是 ”只 能 走 一 格 ， 所 以 原 x 坐标 与 新 位 置 x 坐标 之 差 不 能 大 于 1， 原 
y 坐标 与 新 位 置 y 坐标 之 差 不 能 大 于 1。 

if (Math.Abs(x - oldx) > 1 || Math.Abs(y - oldy) > 1) 

return false; 


由 于 不 能 走出 九宫 ， 所 以 x 坐标 为 4，5，6 且 1<=y<=3 或 8<=y<=10( 实 际 上 仅 需 判 
断 是 否 8<=y<=10 即 可 ， 因 为 走 棋 时 自己 的 “将 ”或 “是 ”只 能 在 下 方 的 九宫 中 )， 否 则 此 
步 违规 ， 将 返回 False。 

3£ (x < 4 UX > 6 | (yy>3 ey < eo return falsers 

“ 士 ” 只 能 走 斜 线 一 格 ， 所 以 原 x 坐标 与 新 位 置 x 坐标 之 差 为 1 且 原 y 坐标 与 新 位 置 y 
坐标 之 差 也 同时 为 1。 

if ((x - oldx) * (y - oldy) == 0) return false; 

if (Math.Abs(x - oldx) > 1 || Math.Abs(y - oldy) > 1) return false; 


由 于 不 能 走出 九宫 ,所 以 x 坐标 为 4, 5, 6 且 1<=y<=3 或 8<=y<=10, 否则 此 步 违规 ， 
将 返回 False。 


EE (re IN Sa Vy < 0) Treoturnd Falser 
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“ 炮 ” 只 能 走 直线 ， 所 以 x，y 不 能 同时 改变 ， 即 (x - oldx) * (y - oldy) = 0 保证 走 直线 。 
然后 判断 如 果 x 坐标 改变 了 ， 原 位 置 oldx 到 目标 位 置 间 是 否 有 棋子 ， 如果 有 子 则 累加 其 间 


棋子 个 数 c。 通 过 c 是 否 为 1 且 目 标 处 是 否 为 己方 棋子 ， 可 以 判断 是 否 可 以 走 棋 。 

“ 兵 ”或 “ 卒 ” 走 棋 规 则 ， 只 能 向 前 走 一 步 ， 根 据 是 否 过 河 ， 检 查 是 否 横 走 。 
与 原 坐标 oldx 改变 的 值 不 能 大 于 1， 同 时 y 与 原 坐标 oldy 改变 的 值 也 不 能 大 于 1。 
过 河 即 是 y<6。 








if ((x =- oldx) * (y - oldy) != 0) 
return false; 
if (Math.Abs(x - oldx) > 1 || Math.Abs(y - oldy) > 1) 
return false; 
if (qi name==(" 兵 ")) { 
if (y >= 6 && (x - oldx) != 0) {// 没 过 河 且 横 走 
return false; 
} 
if (y - oldy > 0) {// 后 退 
return false; 
} 


if (qi name==(" 座 ")){ 
if (Y <= 5 && (x - oldx) != 0) {// 没 过 河 且 横 走 
return false; 
} 
if (y - oldy < 0) {// 后 退 
return false; 
} 


} 
其 余 的 棋子 判断 方法 类 似 ， 这 里 不 再 一 一 介绍 。 





整个 棋盘 左 上 角 棋 盘 坐 标 为 《1，1)， 右 下 角 棋 盘 坐 标 为 《9，10)， 如 图 16-2 所 示 。 
例如 “黑车 ”初始 的 位 置 即 为 《1，1),“ 黑 将 ”初始 的 位 置 即 为 5，1),“ 红 帅 ” 初 始 的 
位 置 即 为 5，10)。 走 棋 过 程 中 ， 需 要 将 鼠标 像素 坐标 转换 成 棋盘 坐标 ， 棋 盘 方 格 的 大 小 


是 76 像素， 通过 整除 76 解析 出 棋盘 坐标 (tempx , tempy)。 


tempx = parseInt (Math.floor((event.x+60) / 76));// 换 算 棋盘 坐标 
tempy = parseInt (Math.floor((event.y+60) / 76)); 
// 防 止 超出 范围 
if (tempx > 9 || tempy > 10 || tempx < 1 || tempy < 1) 
{ 
message txt.text=" 超 出 棋盘 范围 "; 
return ; 
} 


掌握 以 上 关键 技术 ， 就 可 以 开发 中 国 象棋 游戏 了 。 
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图 16-2 ”棋盘 坐标 示意 图 


中 国 象棋 实现 的 步 又 
? 16.3.1 设计 棋子 类 ( Chess.js ) 
棋子 类 代码 中 首先 定义 棋子 


// 棋 子 类 
Var REDPLAYER = 1;// 红 子 为 REDPLAYER， 黑 子 为 BLACKPLAYER 
var BLACKPLAYER = 0; 


棋子 类 构造 函数 的 三 个 参数 分 别 代表 哪 方 、 棋子 名 称 、 棋子 所 在 棋盘 位 置 和 像素 坐标 。 


/* 构 造 函 数 
* 参 数 chesspos 指定 棋子 的 位 置 ， 参 数 player 指定 棋 手 角色 的 类 型 
* 参 数 chessName 指定 棋子 的 类 型 





py 

function Chess (player, chessName, chesspos) { 
this.player = player; // 红 子 为 REDPLAYER， 黑 子 为 BLACKPLAYER 
this.chessName = chessName;// 帅 、 士 、... 
this.pos = chesspos; // 在 棋盘 中 的 位 置 


this.x = this.pos.x * 76-60; // 像 素 坐 标 
this.y = this.pos.y * 76-60; 
} 
Chess.prototype.showPic = function (context) // 显 示 棋 子 
{ 
if (this.player == REDPLAYER) {// 红 方 棋子 
Var imagel = document .getElementById("Img" + this.chessName); 
//" 帅 .png" 
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context .drawImage (imagel, this.x, this.y); 
} else { 
Var image2 = document .getElementById ("Img" + this.chessName + "1"); 
//" 将 1.png" 
context .drawImage (image2, this.x, this.y); 


} 
SetPos(int x,int y) 设置 棋子 所 在 棋盘 中 的 位 置 : 


Chess.prototype.SetPos = function (x，y) // 设 置 棋子 位 置 
{ 

this.pos.x = X7 

this.pos.y = y; 

this.x = this.pos.x * 76 - 60; 

this.y = this.pos.y * 76 - 60; 
| 


棋子 类 中 提供 另 一 个 drawSelectedChess0 方 法 , 它 将 在 棋子 周围 画 选 中 的 示意 边框 线 ， 


里 是 直接 画 在 Canvas 上 。 


Chess.prototype.drawSelectedCchess = function (context) {// 画 选中 棋子 的 示意 
边框 线 

//this.graphics.linestyle (3, OxFF); 

context.lineWwidth = 5; 

Context .strokeStyle = "red"; 

context .beginPath(); // 开 始 绘图 路 径 

context.rect (this.x - 2, this.y - 2, 65, 65); 

Context .stroke (); 
} 






戏 首先 定义 一 个 数组 chess 存储 双方 32 个 棋子 对 象 ， 二 维 数组 Map 保存 了 当前 棋 


盘 的 棋子 布局 ， 当 Map[x.y]=i 时 说 明 此 处 是 棋子 1， 否则 为 -1 说 明 此 处 为 空 。 以 下 是 定 久 
相关 的 变量 。 


Var REDPLAYER = 1; 

Var BLACKPLAYER = 0; 

var chess = new Array();// 所 有 棋子 的 数组 

var Map = new Array(); // 棋 盘 的 棋子 布局 数组 [9 + 1] [10 + 1] 

var m LastCard=null; // 用 户 上 次 选 定 的 棋子 

var localPlayer = REDPLAYER; //localPlayer 记录 自己 是 红 方 还 是 黑 方 
Var mycanvas=document .getElementById('myCanvas'); 

Var context = mycanvas.getContext('2d"'); 

var qipan=document .getElementById ("qipan") ;// 棋 盘 

var shuai=document .getElementById ("Infol") ;// 红 方 走 提示 图 形 
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var jiang=document .getElementById ("Info2") ;// 黑 方 走 提示 图 形 
Var message txt = document -getElementByYId ("message_ txt") 


定义 棋盘 坐标 点 类 Point。 


function Point(x, y) { 
this.x = x; 
this.y = y; 

} 


当前 棋盘 的 棋子 布局 的 二 维 数组 Map 的 初始 化 。 由 于 棋子 索引 从 0 开始 到 31， 所 以 
此 处 初始 化 为 -1。 





function cls map() { 
War 
FoF Mi = 1 1 = 9 13F) 
£0r (J = Lr J <= 10 Jt4) A 
Map[i] [j] = -1;// 此 处 无 棋子 
} 


} 





初始 化 游戏 的 函数 initO 比 较 简 单 , 主要 初始 化 保存 了 当前 棋盘 的 棋子 布局 的 二 维 数组 
Map， 其 调用 initChessO 加 载 32 个 棋子 ， 初 始 化 棋子 布局 ， 并 添加 mycanvas 的 鼠标 事件 监 


听 ，mycanvas 的 鼠标 单 击 事件 处 理 用 户 移动 走 棋 的 过 程 。 


function init(){ 
// 创 建 棋子 布局 数组 Map[9 + 1][10 + 1] 
Map= new Array(); 
Var x,y; 
for (x = 0; x <=9+1; x++) { 
Var temp= new Array(); 
for (y = 0; y <=10+1; y++) { 
temp .push (-1) ;// 此 处 无 棋子 
} 
Map.push (temp); 
} 
initchess () ; // 加 载 32 个 棋子 Sprite， 初 始 化 棋子 布局 
shuai .style.display="block";// 红 帅 显示 ， 表 示 红 方 走 
jiang.style.display="none";// 黑 将 不 显示 
// 监 听 鼠 标 单 击 事件 
mycanvas.addEventListener ("mousedown", doMouseDown, false); 
} 


initChessO 初 始 化 棋子 布局 ， 布 局 时 按 黑 方 棋子 在 上 ， 红 方 棋子 在 下 设计 。 如 果 玩 家 的 
角色 是 黑 方 ， 则 在 下 方 显 示 “ 黑 将 ”。 如 果 玩 家 的 角色 是 红 方 ， 则 在 下 方 显示 “ 红 帅 ”。 布 





260 


HTML5 网 页 游戏 设计 从 基础 到 开 





局 后 并 将 所 有 棋子 添加 到 数组 chess 中 并 显示 。 





发 


// 布 置 棋子 ， 黑 上 ， 红 下 


function initchess () {// 创 建 32 个 棋子 


// 布 置 黑 方 棋子 chess[0]~chess[15] 


be 


//Chess 


c=new Chess (BLACKPLAYER, "将 ", new Point (5, 1)); 
chess.push (c) ;// 将 黑 " 将 "棋子 添加 到 数组 


Map [5 


l= 0 


c= new Chess (BLACKPLAYER, "+", new Point(4, 1)); 


chess 
Map [4 


= 


.push (c) ; // 将 黑 " 士 "棋子 添加 到 数组 


c= new Chess (BLACKPLAYER, i Sep new Point(6, 1)); 


new Chess (BLACKPLAYER, " 象 ", new Point(3, 1)); 


c= new Chess (BLACKPLAYER, "和 象 ", new Point(7, 1)); 


chess.push(c); 
Map[6] [1] = 2; 
c= 

chess.push(c); 
Map[3] [1] = 3; 
chess.push(c); 
Map[7] [1] = 4; 


c= new Chess (BLACKPLAYER, ny new Point (2, 1)); 


chess 
Map[2 


.push(c); 


BY = 3 


c= new Chess (BLACKPLAYER, "BS", new Point(8, 1)); 


chess 
Map[8 


c= 
chess 
Map [1 
c= 
chess 
Map [9 


c = 
chess 
Map [2 


.push (c) 


Ll = "62 


new Chess (BLACKPLAYER, 
push (c); 


= 


new Chess (BLACKPLAYER, 
-push(c); 


[1 = 8» 


new Chess (BLACKPLAYER, 
-push(c) > 


上 ES 


c= new Chess (BLACKPLRAYER， 


chess. 
Map[8 





Var i; 


push(c); 
BD = L108 


for (i = 0; i <= 4; i++) { 
C = new Chess (BLACKPLAYER, 


wm 


本 二 > 


am 烟 呈 


二 


Ee 


new 


new 


new 


new 


new 


Foint(L, Ay) 


Point(9, 1 


Point (2, 3)); 


Point(8, SN 


point (1 4 TEA 之 


4)); 
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chess.push(c); 
Map[l1 + i * 2][4] = 11 + i; 


// 布 置 红 方 棋子 chess[16]--chess[31] 

c= new Chess (REDPLAYER, " 帅 ", new Point(5, 10)); 
chess.push (c);// 将 红 " 帅 "棋子 添加 到 数组 

Map[5] [10] = 16; 

Cc = new Chess (REDPLAYER, " 什 ", new Point (4, 10)); 
chess.push (c) ;// 将 红 " 仕 "棋子 添加 到 数组 

Map[4] [10] = 17; 

C = new Chess (REDPLAYER, " 仕 "，new Point (6, 10)); 
chess.push(c); 

Map[6] [10] = 18; 

c= new Chess (REDPLAYER, 
chess.push(c); 

Map[3] [10] = 19; 

c= new Chess (REDPLAYER, " 相 "， new Point (7, 10)); 
chess.push(c); 

Map[7] [10] = 20; 

c= new Chess (REDPLAYER, 
chess.push(c); 

Map[2] [10] = 21; 

c= new Chess (REDPLAYER, 所 new Point (8, 10)); 
chess.push(c); 

Map[8] [10] = 22; 


new Point (3, 10)); 





new Point (2, 10)); 








c= new Chess (REDPLAYER, 
chess.push(c); 

Map[1] [10] = 23; 

c= new Chess (REDPLAYER, ww new Point (9, 10)); 
chess.push(c); 

Map[9] [10] = 24; 


new Point (1, 10)); 





c= new Chess (REDPLAYER, ws new Point (2, 8)); 
chess.push(c); 

Map[2] [8] = 25; 

Cc = new Chess (REDPLAYER, " 炮 ", new Point (8, 8)); 
chess.push(c); 

Map[8] [8] = 26; 

tow {i= 0 1 <= Mr) 

C = new Chess (REDPLAYER, " 兵 ", new Point (1 + i * 2, 7)); 








chess.push(c); 
Map[ll ei TE 
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} 
console.log(chess); 


DrawALL () ; / /绘制 棋盘 和 32 个 棋子 
} 


DrawALLO 绘 制 棋盘 和 32 个 棋子 ,而 Draw0 绘 制 棋盘 和 棋盘 布局 上 有 的 棋子 (也 就 是 
没 被 吃 掉 的 棋子 )。 
function DrawALL() { 
context .drawImage (qipan，0，0);// 画 棋盘 
Hor (i = OF Me 2 TPE 
chess [i] .showPic (context); // 画 棋子 


} 
function Draw() { 

context .drawImage (qipan, 0, 0); 
Ma 
Eor: (i se > <= 9 4 

tor (I = Lr J <= 107 jEt} 

if (Map[i] [j] != -1)// 此 处 有 棋子 

chess [Map [il [j]] .showPic (context) 7 // 将 棋子 添加 到 场景 


用 户 走 棋 时 ， 首 先 须 选中 自己 的 棋子 〈 第 1 次 选择 棋子 )， 所 以 有 必要 判断 是 否 单 击 
成 对 方 棋子 了 。 如 果 是 自己 的 棋子 ， 则 m_LastCard 记录 用 户 选择 的 模子， 同时 棋子 画 上 红 
色 边框 示意 被 选中 。 

当 用 户 选 过 已 方 棋子 后 ， 第 2 次 选择 棋子 有 可 能 是 用 户 改 变 主意 ， 选 择 自己 的 另 一 棋 
子 ， 则 m_LastCard 重新 记录 用 户 选择 的 己方 棋子 。 

如 果 不 是 重新 选择 己方 棋子 ， 则 调用 IsAbleToPut(m_LastCard, tempx, tempy) 判 断 是 否 
能 走 棋 ， 如 果 符 合 走 棋 规则 ， 被 吃 掉 的 棋子 不 显示 ， 第 1 次 被 选中 的 棋子 移 到 目标 处 。 如 
果 对 方 将 或 帅 被 吃 掉 ， 则 游戏 结束 。 





function doMouseDown (event) { 
Var x = event .pageX7 
Var y = event .pageYy; 
Var canvas = event.target; 
Var loc = getPointOonCanvas (canvas, x, y); 
consoles log("mouse doun at point( x + IOsX 4 ™ YF locy FT MW) 
stageClick (loc); 
} 
function getPointonCanvas (canvas, x, y) { 
Var bbox = canvas.getBoundingClientRect (); 
return { X: xX - bbox.left * (canvas.width / bbox.width), 
Y: Y - bbox.top * (canvas.height / bbox.height) 
[2 
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} 
function stageClick(event) { // 棋 盘 上 单 击 
// 目 标 处 没 棋子 ， 移 动 棋子 
Var tempx,tempy; 
tempx = parseInt (Math.floor( (event.x+60) / 76) ) ;// 换 算 棋盘 坐标 
tempy = parseInt (Math.floor((event-.Yy+60) / 76)) 


message txt.innerHTML="x: "+tempx+", y: "+tempy; 
// 防 止 超出 范围 
if (tempx > 9 || tempy > 10 || tempx < 1 || tempy < 1) 
{ 
message txt.innerHTML=" 超 出 棋盘 范围 "; 
return; 
} 
if( m LastCard == null ) // 如 果 之 前 没有 选择 任何 棋子 
{ 
if (Map [tempx] [tempy] != -1) { 
Var C=chess [Map [tempx] [tempy]]; 
if(!isMyChess(c)){ 
message txt.innerHTML = "请 选择 自己 的 棋子 "; 
return; 
m LastCard = chess [Map [tempx] [tempy]]; 
m LastCcard.drawSelectedChess (context); // 对 选中 的 棋子 画 示 意 边框 
} 
else 
return; 
} 
else {// 如 果 之 前 已 经 选择 了 棋子 
// 判 断 是 否 重新 选择 自己 的 棋子 
if (Map [tempx] [tempy] != -1) { 
Var c=chess [Map [tempx] [tempy]]; 
if (isMYChess (c) ) {// 重 新 选择 自己 的 棋子 
Draw () ;// 重 画 棋盘 和 棋子 
m LastCard = chess [Map [tempx] [tempy] ]; 
m LastCcard.drawSelectedCchess (context);// 对 选中 的 棋子 画 示意 边框 
return; 


} 
if( IsAbleToPut (m LastCard, tempx, tempy))t{ 


/ /移动 棋子 
Var idx, idx2; // 保 存 第 一 次 和 第 二 次 被 单 击 棋子 的 索引 号 
TORT II // 第 一 次 被 单 击 棋子 在 棋盘 的 原 坐 标 


xl1 = m LastCard.pos.x; 


yl = m LastCard.pos.y; 
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YY27 // 第 二 次 被 单 击 棋子 在 棋盘 的 坐标 
Xx2=tempx; y2=tempy; 
idx = Map[xzxl1] [yl1]; 
idx2 = Map[x2] [y2]; 
Map[x1] [yl1] = -1; 
Map [x2] [y2] = idx; 
message txt.innerHTML TT 
chess[idx] .SetPos (x2, y2); 
/ /判断 被 吃 的 是 否 是 对 方 的 将 
if (idz2 == 0) //0---" 将 " 
message txt.innerHTML = " 红 方 赢 了 "7 
if (idx2 == 16) //16--" 帅 " 
message txt.innerHTML = " 黑 方 赢 了 "7 
Draw() ;// 重 画 棋盘 和 棋子 
reversePlayer (); // 改 变 玩家 角色 
}else { 
// 错 误 走 棋 
message txt.innerHTML = "不 符合 走 棋 规 则 "; 
} 





} 
IsAbleToPut(firstchess, x, y) 实 现 判 断 是 否 能 走 棋 返回 逻辑 值 ， 相 应 的 代码 最 复杂 。 


//IsAbleToPut (firstchess，x，y) 实现 判断 是 否 能 走 棋 返 回 罗 辑 值 ， 相 应 的 代码 最 复杂 
function IsAbleToPut (firstchess , x, y) { 

War ds Cpt 

var oldx，oldy; // 在 棋盘 原 坐 标 

oldx = firstchess.pos.x; 

oldy = firstchess.pos.y; 

var qi name = firstchess.chessName; 

if (qi name==(" 将 ") || qi name==(" 帅 ")) { 

if ((x - oldx) * (y - oldy) != 0) { 


return false; 


if (Math.abs(x - oldx) > 1 || Math.abs(y - oldy) > 1) { 
return false; 


A 
return false; 
return true; 
. 
if (qi name 一 (" 士 ") || qi name==(" 仕 ")) { 
if ((X- oldx) * (y - oldy) == 0) { 
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象棋 重新 开始 代码 。 
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jiang.style.display="none"; // 黑 将 不 显示 
localPlayer = REDPLAYER; 





<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.0rg/TR/html4/loo0se.dtd"> 


<html> 

<head> 

<title> 中 国 象棋 </title> 

<meta http-equiv=content-type content="text/html; charset=utf-8"> 
</head> 

<body onload="init()" onkeydown="DoKeyDown (event)"> 

<canvas id="myCanvas" width="720" height="800"> 你 的 浏览 器 还 不 支持 哦 </canvas> 
<div> 




















<img idq="qipan" src="res/ 棋 盘 .png" style="display:none;"> 
<img id="Img 将 1" src="res/ 将 1.png" style="display:none;"> 
<img id="Img 士 l]" src="res/ 仕 1.png" style="display:none;"> 





<img i Img 象 1" src="res/ 象 1.png" style="display:none;"> 
<img id="Img 马 1" src="res/ 马 1.png" style="display:none;"> 
<img id="Img 车 1" src="res/ 车 1.png" style="display:none;"> 
<img id="Img 炮 1" src="res/ 炮 1.png" style="display:none;"> 
<img id="Img 人 府 1" src="res/ 革 1.png" style="display:none;"> 
<img id="Img 帅 " src="res/ 帅 .png" style="display:none;"> 

<img id="Img 仕 " src="res/ 士 .png" style="display:none;"> 

id="Img 相 " 
<img i 


<img src="res/ 相 .png" style="display:none;"> 






SLCc="res/ 马 .png"” style="display:none;"> 


<img i src="res/ 车 .png" style="display:none;"> 
<img id="Img 炮 " src="res/ 炮 .png" style="display:none;"> 
<img id="Img 兵 " src="res/ 兵 .png" style="display:none;"> 
</div> 


<div style="float:left; display:inline;"> 

<img id="Infol" src="res/ 帅 .png" > 

<img id="Info2" src="res/ 将 1.png" style="display:none;"> 

</div> 

<div id="message txt" style="float:left; display:inline;"></div> 
<script type="text/javascript" src="ChessGame.js"></script> 
<script type="text/javascript" src="Chess.js"></script> 

</body> 

</html> 


运行 效果 如 图 16-3 所 示 。 这 个 游戏 中 双方 在 本 机 轮 下 ， 读 者 可 以 根据 网 络 通信 知识 ， 
完善 本 游戏 从 而 实现 网 络 版 对 战 中 国 象棋 。 
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图 16-3 ”中国 象 棋 运行 界面 
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麻将 游戏 介绍 


麻将 起 源 于 中 国 ， 它 集 益 智 性 、 趣 味 性 、 博 弈 性 于 一 体 ， 是 中 国 传统 文化 的 一 个 重要 
组 成 部 分 。 不 同 地 区 的 游戏 规则 稍 有 不 同 。 麻 将 牌 每 副 136 张 。 主 要 有 “ 饼 〈 文 钱 )”“ 条 
(〈 索 子 )”“ 万 〈 万 贯 )” 等 。 与 其 他 牌 形式 相 比 ， 麻 将 的 玩法 最 为 复杂 有 趣 ， 它 的 基本 打 法 
简单 ， 因 此 成 为 中 国 历史 上 最 能 吸引 人 的 博弈 形式 之 一 。 

1. 麻将 术语 

麻将 术语 是 “ 吃 ”“ 碰 ”“ 杠 ”。 

吃 : 如 任何 一 位 选手 手中 的 牌 中 的 两 张 再 加 上 上 家 选手 刚 打 下 的 一 张 牌 恰好 成 顺 子 ， 
他 就 可 吃 牌 。 

碰 : 如 果 某 方 打出 一 张 牌 ， 而 自己 手中 有 两 张 与 该 牌 相同 牌 的 时 候 ， 可 以 选择 “ 碰 ” 
牌 。 碰 牌 后 ， 取 得 对 方 打出 的 这 张 牌 ， 加 上 自己 提供 的 两 张 相同 牌 成 为 刻 子 ， 倒 下 这 个 刻 
子 ， 不 能 再 出 。 然 后 再 出 一 张 牌 。 

杠 : 其 他 人 打出 一 张 牌 ， 自 己 手中 有 三 张 相同 的 牌 ， 即 可 杠 牌 。 

2. 上 牌 数 

共 136 张 : 

(1) 万 字 牌 从 一 万 至 九 万 ， 各 4 张 ， 共 36 张 。 

(2) 饼 字 牌 : 从 一 饼 至 九 饼 ， 各 4 张 ， 共 36 张 。 

(3) 条 字 牌 : 从 一 条 至 九条 ， 各 4 张 ， 共 36 张 。 

(4) 风 牌 : 东 、 南 、 西 、 北 ， 各 4 张 ， 共 16 张 。 

(5) 字 牌 中、 发 、 白 , 各 4 张 ， 共 12 张 。 

本 章 设 计 的 是 两 人 麻将 程序 ， 可 以 实现 玩家 (人 ) 和 电脑 对 下 。 游 戏 有 碰 、 杠 功能 ， 
可 进行 和 牌 判断 。 为 了 降低 程序 复杂 度 ， 游 戏 没有 设计 “ 吃 ” 的 功能 。 同 时 对 电脑 出 牌 进 
行 了 智能 设计 ， 游 戏 运 行 初始 界面 如 图 17-1 所 示 。 

















图 17-1 


两 人 麻将 游戏 设计 的 思路 


条 


为 0_ 1.png 一 0 9.png， 


和 区 名 大 食 硕 谢 属 医 区 区 
中 


-条 至 九条 为 1_1.png 一 1_9.png， 
字 牌 为 3_1.png 一 3_7.png， 如 图 17-2 所 示 。 


两 人 麻将 游戏 运行 初始 界面 
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?17.2.2 








游戏 逻辑 实现 














游戏 中 上 两 个 定时 器 实现 游戏 多 得 及 动画 效果 。 定时 器 1 主要 负责 剧 新 游戏 界面 ， 给 
制 两 家 的 麻将 牌 ， 以 及 碰 杜 和 图 片 。 


window.setInterval ("display()",50);//50 为 50 毫秒 ， 数 字 越 小 表示 速度 越 快 
定时 器 2 实现 游戏 过 程 逻 辑 。 游 戏 中 有 两 个 牌 手 ， 一 个 是 电脑 (1 号 牌 手 )， 一 个 玩家 


自己 (2 


var 
var 
var 
var 
var 
var 
Var 
WE 
Var 
Var 
Var 





号 牌 手 )。 定 时 器 2 根据 游戏 的 状态 来 控制 游戏 出 牌 顺序 。 游 戏 中 定义 以 下 状态 : 
game s sessioninit = 1; // 游 戏 开始 状态 ， 完 成 清空 和 计数 清 零 
game s sendcard = 2; // 发 14 张 牌 

game s_coml = 7; // 电 脑 可 以 处 理 碰 、 杠 、 和 或 摸 牌 
game s_com2 = 8; // 电 脑 可 以 出 牌 

game s humanl = 9; // 玩 家 可 以 处 理 碰 、 杠 、 和 或 摸 牌 
game s human2 = 10; // 玩 家 可 以 出 牌 

game s seamo = 11; 

game s nohu = 12; // 黄 庄 

game s sessionend = 13; 

game s score = 14; // 和 有 牌 计 分 

game s = game s_ sessioninit ; // 保 存 游戏 现在 的 状态 


游戏 中 每 0.5 秒 就 进行 游戏 逻辑 判断 ， 通 过 判断 状态 是 什么 ， 进 行 相应 处 理 。 


window.setInterval ("RunGame ()", 500); // 每 0.5 秒 时 间 间 隔 执 行 一 次 RunGame () 
function RunGame () // 进 行 游戏 逻辑 判断 


{ 


console.log("state:"+game S) 7 
if (game s == game s_sessioninit) { 
Initsession() ;// 桌 面 牌 清空 ， 清 空 玩 家 和 电脑 手 里 暗 牌 、 明 牌 和 已 出 的 牌 
game s = game s sendcard; 
}else if (game s == game s sendcard) { 
Sendcard (); // 完 成 给 电脑 及 玩家 发 14 张 牌 的 任务 
}else if (game s == game _s_coml) {// 进 入 电脑 磁 、 杠 或 者 摸 牌 的 状态 
can peng = false; 
can gang = false; 
can hu = false; 
Com Process(); 
jelse if (game s == game s com2) {// 等 待 电 脑 出 牌 状态 
Com Showcard(); ”// 电 脑 智能 出 牌 
jelse if (game s == game s humanl1) {// 进 入 玩家 碰 、 杠 或 者 摸 牌 的 状态 
if (Check Peng (player, computer.outcard)) { 
can peng = true; 
下 
if (Check Gang (player, 3, computer.outcard)) { 


can gang = true; 
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if (Check Hul(player, computer.outcard)) { 
can hu = true; 

} 

}else if (game s == game s_human2) {// 等 待 玩家 出 牌 状态 
can peng = false; 

}else if (game s == game 5s_score) {// 显 示 得 分 
Score Session(); 

} 

} 


游戏 过 程 中 , 有 三 个 对 象 player、computer 和 desktop 记录 两 个 牌 手 的 牌 以 及 桌面 上 的 
牌 ， 其 中 player 记录 玩家 自己 的 金币 数 、id (2 号 牌 手 )、 玩 家 上 暗 牌 列表 、 玩 家 明 牌 列表 、 
玩家 已 出 的 牌 列表 ，computer 记录 电脑 金币 数 、id (1 号 牌 手 )、 电 脑 暗 牌 列表 、 电 脑 明 牌 
列表 、 已 出 的 牌 列 表 ，desktop 记录 桌面 上 一 个 电脑 (1 号 牌 手 ) 的 牌 。 同 理 playersOutCard 
数组 记录 两 个 牌 手 出 过 的 牌 。 所 有 的 牌 存 入 m_aCards 数组 ， 同 时 为 了 便于 知道 该 发 哪 张 
牌 ， 这 里 k 记录 已 发 出 牌 的 个 数 ， 从 而 知道 要 摸 的 牌 是 m_aCards[k]。 


// 玩 家 金币 数 、id、 暗 牌 列表 、 明 牌 列表 、 已 出 的 牌 列 表 

var player = { gold: 10000, id: 2, blacklist: [], whitelist: [], outedlist: [] }; 
// 电 脑 金币 数 、id、 暗 牌 列表 、 明 牌 列表 、 已 出 的 牌 列 表 

Var computer ={gold:10000,id:1,blacklist:[],whitelist:[],outedlist:[]}; 
// 桌 面 上 的 将 要 发 牌 的 牌 、 不 能 发 的 牌 、 发 过 的 牌 、 发 过 的 数量 


var desktop ={cardlist:[],sealist:[],outedlist:[],outcount:0}7 






过 程 中 玩家 自己 可 以 “ 碰 牌 ”和 “ 吃 牌 ” 所 以 需要 判断 电脑 (1 号 牌 手 ) 刚 出 的 
牌 玩家 是 否 可 以 碰 吃 ， 如 果 能 够 碰 吃 则 显示 “ 碰 牌 ”和 “ 吃 牌 ”及 “ 摸 牌 ”按钮 。 

能 否 “ 碰 牌 ”判断 比较 简单 ， 由 于 每 张 牌 有 类 型 type 和 点 数 value， 所 以 只 需 统计 与 
对 方刚 出 的 牌 xcard 相同 的 是 否 有 2 张 ， 如 果 有 则 可 以 “ 碰 牌 ”。 


// 是 否 可 以 碰 牌 
function Check Peng (p,zxcard) // 是 否 能 碰 牌 
{ 
if (xcard ==null ) 
return false; 
var count = 0; 
for (var i=0;i<p.blacklist.length;i++) 
if( p.blacklist[i] .type == xcard.type && p.blacklist[i] .value == 
xcard.value )// 与 xcard 牌 相同 
count = count +1; 
1E( Count >=2.') 
return true; 
else 
return false; 
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发 


能 否 “ 吃 牌 ”的 判断 也 比较 简单 ， 由 于 牌 手 手 里 的 瞳 牌 ( 数 组 ) 已 经 是 排 过 序 的 了 ， 
所 以 只 要 判断 以 下 这 三 种 情况 : 

]** 

米 ] 六 


玉米] 
1 代表 对 方刚 出 的 牌 xcard， 如 果 符 合 这 三 种 情况 则 可 以 “ 吃 牌 ”。 
// 是 否 可 以 吃 牌 


function canChi (P，xcard) { 
Var i,n=0; 
Mar elrc2 
if (xcard.type==3)return false;  // 字 牌 不 存在 吃 ， 所 以 直接 返回 不 可 以 
for (i = 0; i <p.blacklist.length-1l; i++) {//1** 
cl= p.blacklist([i]; 
c2= p.blacklist([i+1]; 
if(cl.type == xcard.type && cl.value == xcard.value+l 
&& C2.type == xcard.type && c2.value == xcard.value+2 ){ 
return true; 


for (i = 0; i <p.blacklist.length-1l; i++) {//*1* 
cl= p.blacklist([i]; 
c2= p.blacklist [i+1]; 
if(cl.type == xcard.type && cl.value == Xcard.value-1 
&& C2.type == xcard.type && c2.value == xcard.value+l ){{ 
return true; 


for (i = 0; i <p.blacklist.length-1; i++) {//**] 
cl= p.blacklist([i]; 
c2= p.blacklist [i+1]; 
if(cl.type == xcard.type && cl.value == xcard.value-2 
&& C2.type == xcard.type && c2.value == xcard.value-l1 ){ 
return true; 


} 
return false; 
} 


本 游戏 设计 时 不 允许 吃 牌 ， 所 以 此 功能 没 加 入 。 





1. 数据 结构 的 定义 
麻将 由 “万 ”“ 饼 ”( 简 )“ 条 ”( 索 )“ 字 ”四 类 牌 组 成 ,其 中 “万 ”又 分 为 “一 万 ”“ 二 
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万 ”…、“ 九 万 ”各 4 张 共 36 张 ,“ 饼 ”“ 条 ”类 似 ,“ 字 ”分 为 “< 东 ”“ 南 ”“ 西 "”“ 北 ”"“ 中 ” 
“发 "“ 白 ”各 4 张 共 28 张 。 

这 里 定义 了 一 个 数组 mk， 它 记录 着 牌 手 手中 某 种 牌 的 个 数 。 第 1~9 元 素 分 别 对 应 着 
“一 饼 ”~“ 九 饼 ” 的 个 数 ， 第 11~19 元 素 分 别 对 应 着 “一 条 ”~“ 九 条 ”的 个 数 ， 第 21~29 
元 素 分 别 对 应 着 “一 万 ”~“ 九 万 ”的 个 数 。 第 31~37 元 素 对 应 的 是 “中 ”“ 发 "“ 白 ”“ 东 ” 
“ 南 ”“ 西 ”"“ 北 ”的 个 数 。 数 组 mk 统计 某 种 牌 的 个 数 时 把 对 方刚 出 的 牌 xcard 也 算 在 内 ， 
因为 对 方 可 能 会 “放炮 ”。 

2. 算法 设计 

根据 麻将 的 规则 ， 数 组 中 的 牌 的 总 数 一 定 为 3n+2， 其 中 n=0，1，2，3，4。 尽 管 能 构 
成 和 的 牌 的 形式 千变万化 ， 但 稍 加 分 析 可 以 看 出 它 离 不 开 一 个 模型 : 它 可 以 分 解 为 “三 、 
三 、…、 三、 二 ”的 形式 (总 牌 数 为 3n+2 张 )， 其 中 的 “三 ”表示 的 是 “ 顺 ” 或 “ 刻 ”( 连 
续 三 张 朋 叫 作 < 如 “三 饼 ”“ 四 饼 ”“ 五 饼 ”“ 字 ” 牌 不 存在 “ 顺 ”， 三 张 同样 的 牌 叫 
作 “ 刻 ”如 “三 饼 ”“ 三 饼 ”"“ 三 饼 ”)， 其 中 的 “二 ”表示 的 是 “将 ”( 两 张 相同 的 牌 可 作 
为 “将 ” 如 “三 饼 ”“ 三 饼 ”)。 

在 代码 实现 中 ， 如 果 是 “ 顺 ”“ 刻 ”或 “将 ”( 只 能 一 个 ) 则 从 存放 个 数 数组 mk 中 减 
去 ， 最 后 如 果 数 组 mk 元 素 和 是 零 ， 则 说 明 3n+2 形成 ， 和 牌 。 

这 个 过 程 采用 递归 方法 实现 : 

function Check Hul(p,xcard) 

{ 








for (var j=0;j<38;j++ ) // 初 始 化 每 种 牌 的 个 数 
mk[j]=0; 

for (var i=0;i< p.blacklist.length ;i++)/ 

{ ”// 统 计 手 中 某 种 牌 的 个 数 ( 如 mk[1] 是 几 张 一 饼 ，mk[2] 是 几 张 二 饼 ，.…) 
k= p.blacklist[i].value + (p.blacklist[i].type)*10; 
mk[k]=mk[k]+1; 


if (xcard!=null) //zxcard 是 对 方刚 出 的 牌 
{ k=xcard.valuet+ (xcard.type)*10; 
mk [kK]=mk[k]+1;// 将 对 方刚 出 的 牌 也 算 入 
} 
jiang=0;// 没 将 牌 
4 Ls Hoat )》 
return true; 
else 
return false; 
} 
function Is Hu() 
长 
Var ii=0; 
if (Mk Count ()==0) // 数 组 mk 元 素 和 是 零 ， 则 说 明 3n+2 形成 ， 和 牌 
return true;// 和 有 牌 
for (var i=0;i<38;i++) 
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{ 
if( mk[i]>0 ) 
{ ii=i; 
break; 
} 
} 
1£ (mEtiil 3=°3 ) /1/3 张 以 上 
{ 
mk[ii]=mk[ii]-3; // 去 掉 这 3 张 牌 ， 就 是 此 牌 个 数 减少 3 
if( Is Hu()) 
return true; 
mk[ii]=mk[ii]+3; // 加 上 这 3 张 牌 ， 此 牌 恢复 到 原来 数量 
1 
if( jiang==0 && mk[ii]>=2 ) //2 张 以 上 且 没有 将 
jiang=1; // 有 将 牌 
mk [ii]=mk [ii]-2; // 去 掉 这 2 张 牌 ， 就 是 此 牌 个 数 减少 2 


if (Is_Hu()) 

{ return true;} 

mk[ii]=mk[ii]+2; // 加 上 这 2 张 牌 ， 此 牌 恢复 到 原来 数量 
ng = 0 // 没 有 将 








} 
if( ii>30) // 字 牌 ， 如 果 上 面 判 断 对 于 非 字 牌 都 不 能 成 功 ， 则 直接 和 牌 失败 
return false; 
// 下 面 判断 顺 牌 情况 
if( iigsl0!= 8 && ii%10!= 9 && mk[ii+l]>0 && mk[ii+2] >0 ) // 处 理 顺 牌 
{ mk[ii]=mk[ii]-1; 
mk [ii+1]=mk [ii+1]-1; 
mk [ii+2]=mk [ii+2] -1; 
if (Is Hu()) 
return true; 
mkK[ii]=mk[ii]+1; 
mk[ii+1]=mk [ii+1]+1; 
mk[ii+2]=mk [ii+2]+1; 
} 
return false; 
} 
function Mk Count( ) // 统 计 牌 个 数 和 
{ var ret=0; 
for (var j=0;j<38; j++) 
ret=mk[j]+ret; 
return ret; 
} 


JTs_Hu0 首 先 判 断 手中 的 某 牌 数目 如 果 大 于 等 于 3， 那 么 它们 一 定 是 以 “ 刻 ”的 形式 组 
合 。 例 如; 当前 有 3 张 “五 万 "如果 它们 不 构成 “ 刻 ”， 则 必须 有 3 张 “ 六 万 "、3 张 “七 
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万 ”与 其 构成 3 个 “ 顺 ”( 注 意 此 时 “五 万 ”是 数组 中 的 第 一 张 牌 )， 否 则 就 会 剩 下 “五 万 ” 
不 能 组 合 ， 而 此 时 的 3 个 “ 顺 ” 实 际 上 也 是 三 个 “ 刻 ” 去 掉 这 3 张 牌 〈 即 此 牌 对 应 数组 
mk 元 素 减少 3)， 递 归 调 用 Is_Hu0 函 数 ， 如 果 数 组 mk 元 素 和 是 零 则 和 有 牌 ， 不 能 和 牌 则 将 
此 牌 恢复 到 原来 数量 。 
其 次 某 牌 数目 如 果 大 于 等 于 2， 有 作为 “将 ”的 可 能 ， 去 掉 这 对 “将 ”后 再 递归 调用 
I_Hu0 函 数 ， 如 果 数 组 mk 元 素 和 是 零 则 和 牌 ， 不 能 和 牌 则 将 此 牌 恢复 到 原来 数量 。 
如 果 上 面 判 断 对 于 非 字 牌 都 不 能 成 功 ， 则 直接 和 牌 失败 。 
最 后 当 该 牌 不 是 字 牌 且 它 的 下 两 张 牌 均 存 在 时 它 还 可 以 构成 “ 顺 ” 牌 ， 则 将 形成 顺 子 
的 3 张 牌 个 数 都 减 1， 再 递归 调用 Is_Hu0 函 数 , 判断 是 否 和 牌 , 不 和 牌 则 恢复 到 原来 数量 。 
在 递归 和 轮 询 过 程 中 ， 尽 管 每 次 去 掉 了 某 些 牌 ， 但 最 终 都 会 再 次 将 这 些 牌 加 上 ， 使 得 
数组 中 的 数据 保持 不 变 。 
?17.2.5 ”实现 电脑 智能 出 牌 


游戏 中 有 两 个 牌 手 ， 一 个 玩家 自己 (2 号 牌 手 )， 一 个 电脑 (1 号 牌 手 )。 电 脑 如 果 只 
能 随机 出 牌 ， 则 游戏 可 玩 性 较 差 ， 所 以 智能 出 牌 是 一 个 设计 重点 。 

为 了 判断 出 牌 需 要 首先 计算 手中 各 种 牌 型 的 数量 。paiArray 数组 存储 同和 上牌 算法 数据 
结构 ， 它 记录 着 手中 的 牌 的 全 部 信息 ， 行 号 记录 类 别 信息 ， 第 0~3 行 分 别 代表 “人 饼 ”“ 条 ” 
“万 ”“ 字 ”。 本 游戏 给 出 一 个 智能 出 牌 的 算法 : 

假设 Cards 为 手中 所 有 的 牌 。 

(1) 判断 字 牌 的 单 张 ， 即 paiArray 行 号 为 3 的 元 素 是 否 为 1。 有 则 找到 ， 返 回 在 Cards 
的 索引 号 。 

(2) 判断 顺 子 、 刻 子 〈 三 张 相 同 的 )， 有 则 在 paiArray 中 消去 ， 即 不 需要 考虑 这 些 牌 。 

(3) 判断 单 张 非 字 牌 〈 饼 、 条 、 万 )， 有 则 找到 ， 返 回 在 Cards 的 索引 号 。 

(4) 判断 两 张 牌 〈 饼 、 条 、 万 ， 包 括 字 牌 )， 有 则 找到 《〈 即 拆 双 牌 )， 返 回 在 Cards 的 
索引 号 。 

(5) 如 果 以 上 情况 均 没 出 现 则 随机 选 出 一 张 牌 。 当 然 此 种 情况 一 般 不 会 出 现 。 

functionComputer outCard(1ist) { 

/7 电脑 智能 出 牌 v1.0， 计 算出 牌 的 索引 号 
for (var j=0;j<38;j++ ){ 
mk[j]=0; 

















a 

for (Var i=0;i<list.length ;i++){ // 统 计 每 种 牌 的 个 数 
k= list[i].value + (list[i] .type)*10; 
mk[k]=mk [kK]+1; 


} 
// 电 脑 智 能 选 牌 
//1 -判断 字 牌 的 单 张 ， 有 则 找到 
for (j = 31; j <=37; j++) { 
i(k nl 
// 获 取 在 手中 牌 的 位 置 下 标 
k=findcard (list, 3,j-30); 
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for (var i=0; i < list.length;i++){ 
if( list[i] .type==type && list[i].value == value) 
return i; 
} 
BeEuen 1 
} 


两 人 麻将 游戏 设计 的 步 又 


“17.3.1 麻将 牌 类 设计 ( Card.js ) 加 网 

Card 为 麻将 牌 类 ， 构 造 函 数 根据 参数 type 指定 麻将 牌 的 类 型 ， 参 数 num 指定 麻将 牌 
的 点 数 。 从 牌 的 类 型 和 牌 的 点 数 计算 出 对 应 的 麻将 牌 图 片 。 麻 将 牌 的 所 有 图 片 文件 见 图 17-2 
的 素材 。 

Card 麻将 牌 类 可 以 实现 麻将 牌 正面 、 背 面 显示 以 及 播放 声音 文件 的 功能 : 





/Vcard 麻将 牌 类 
function card(t, v, img, ado) { 
this.type = t; // 牌 的 类 型 饼 =0 条 =1 万 =2 字 牌 =3 
this.value = v; // 牌 的 点 数 〈 一 到 九 ) 
this.img = img; // 牌 自己 图 像 
this.ado = ado; // 牌 对 应 声音 


this.draw = function (x, y) { 
cxt.drawImage (this.img, x, y); 

} 

this.drawex = function (x, y, w, h) { 
cxt.drawImage (this.img, x, y, w, h); 

} 

this.drawbg = function (x, y) { 
cxt .drawImage (cardbg img, x, y); 

} 

this.play = function () { 
this.ado.play(); // 播 放声 音 文件 


} 


Sort_List(D) 实 现 麻 将 牌 数 组 的 排序 。 对 牌 手 手中 的 扑克 牌 List 采用 冒 泡 排序 算法 ， 按 
照 饼 =0、 条 =1、 万 =2、 字 牌 =3 顺序 排序 ， 同 种 牌 ( LU]type 一 LID]type && 
LD].value<L[il.value) 按 点 数 排序 : 

function Sort List(L){ 

if(L.length>1) 
for (Var i=0;i<L.length;i++) 


for (var j=i+1;j<L.1length;j++) 
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if(L[j] .type < Llil.type 1 ( LIjl.type = LL[il:type && 
L[j] .value<L[i] .value)) 

Var tempcard = L[il]; 

L[i]=L[j]; 

L[j]=tempcard; 


} 
function Count Card(L,xcard) {// 统 计 xcard 牌 的 个 数 
Var count=0; 
for (var i=0;i<L.1length;i++) 
if(LIi]l.type == Xcard.type && L[i]l .value==xcard.value) 
Count++; 
return count; 
} 
function Cardcount List (L,i)// 统 计 索 引号 为 i 的 牌 的 个 数 
{ 
if(i<0 || i>=L.length ) 
alertd™t Ta onbe ms 
Var fcard = L[i]l]; 
return Count Cardl(L,fcard); 
} 


?17.3.2 “设计 游戏 光 辑 脚本 ( main2 
游戏 开始 时 首先 调用 initGame0， 生 成 136 张 麻将 牌 加 入 到 数组 cards 中 。 同 时 完成 加 
载 碰 、 杠 、 和 牌 等 图 片 资源 以 及 声音 资源 : 

function initGame ()// 初 始 化 游戏 开始 的 资源 

{ 














Var canv=document .getElementById ("box"); 
cxt =canv.getContext ("2d"); 
initCards (); 
console.log (cards.length); 
LoadImage () 7 
LoadAudio(); 
zhuang = 1; // 庄 家 1 是 电脑 ，2 是 玩家 
} 


LoadImage() 完 成 加 载 碰 、 杠 、 和 上牌 等 图 片 资 源 ， 而 LoadAudio0) 完 成 加 载 声 音 资 源 : 


function LoadImage (){ 
cardbg img = new Image();cardbg img.src = "png/card bg.png"; 
img hu = new Image(); img hu.src = "png/bt hu.png"; 
img hul = new Image(); img hul.src = "png/bt hul.png"; 
img peng = new Image();img peng.src = "png/bt peng.png"; 
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img pengl = new Image();img pengl.src = "png/bt pengl.png"; 
img gang = new Image();img gang.src = "png/bt gang.png"; 

img gangl = new Image();img gangl.src = "png/bt gangl.png"; 
img zhuang = new Image();img zhuang.src = "png/zhuang.png"; 


function LoadAudio(){ 
mp3 getcard = new Audio("mp3/getcard.mp3"); 
mp3 click = new Audio("mp3/click.mp3"); 


mp3 peng = new Audio ("mp3/gpeng.mp3"); // 碰 牌 的 声音 
mp3 gang = new Audio ("mp3/ggang.mp3"); // 杠 牌 的 声音 
mp3 zimo = new Rudio("mp3/gzimo.mp3") 7 // 自 摸 的 声音 


mp3_fangpao = new Rudio("mp3/gfangpao -mp3") ; // 对 家 出 牌 放 炮 的 声音 
} 


initCards() 完 成 cards 数组 中 存 入 136 张 麻 将 牌 : 


function initCcards (){ 
Wa 
for (i=0;i<4;i++) { 
for( j=1;j<10;j++){ 
break; // 字 牌 没 有 8，9 
var card T = getCcard(i,j); 
cards.push (card T, card T,card T,card T) ;// 同 一 种 牌 4 张 





} 
getCard(type,value) 返 回 类 型 是 type， 点 数 是 value 的 牌 : 


function getCard(type,value){ 
var imgurl = "png/"+type+" "+value+".png"; 
Var image = new Image(); 
image.src = imgurl; 
var ado = new Audio ("mp3/"+type+" "+value+".mp3"); // 声 音 文件 
var card T = new card(type,value, image,ado); 
return card T; 
} 


本 游戏 中 定义 多 种 状态 ， 游 戏 的 第 一 个 状态 是 game_s_sessioninit， 即 游戏 开始 状态 ， 
完成 桌面 牌 清空 列表 和 计数 清 零 ， 清 空 玩 家 和 电脑 手 里 瞳 牌 、 明 牌 和 已 出 的 牌 ， 桌面 牌 列 
表 desktop.cardlist 加 入 初始 的 136 张 麻将 并 完成 洗 牌 : 








function InitSession() 

{ 
// 清 空 列表 和 计数 
desktop.cardlist.1length=0; 
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desktop.outedlist.length=0; 
desktop.sealist.length=0; 
desktop.outcount = 0 
if (winner != null) // 如 果 有 赢家 则 赢家 本 次 做 庄家 
{ 
zhuang = winner.id; 
天 
winner = null; 
loser = mallz 


zipai = 0; 

gangpai = 0; 

sscore = 0; 

clickpos = 0; 

// 清 空 玩家 暗 牌 、 明 牌 和 已 出 的 牌 
player.whitelist.length=0;// 明 牌 
player.blacklist .length=0;// 暗 牌 
player.outedlist.length=0;// 已 出 的 牌 
player.mocard=null; 
player.outcard=null; 


// 清 空 电脑 暗 牌 、 明 牌 和 已 出 的 牌 

computer .whitelist.length=07 

Computer .blacklist.length=07 

computer .outedlist.length=07 

computer.mocard=null; 

computer.outcard=null; 

// 碰 杜 和 无 效 

can peng = false; 

can gang = false; 

can hu = falses 

// 桌 面 牌 列表 desktop.cardlist 加 入 初始 的 136 张 麻将 

for (var i=0;i<136;i++) 
desktop.cardlist.push (cards [i]); 

// 洗 牌 

for (Var i=0;i<136;i++) { 
var n = Math.floor (Math.random()*135) ;// 随 机 选中 第 n 张 麻将 与 第 i 张 交换 
tempcard = desktop.cardlist[n]; 
desktop.cardlist[n]=desktop.cardlist[i]; 
desktop.cardlist[i]=tempcard; 

} 

// 删 除 16 张 麻将 ， 意 味 最 后 16 张 不 能 发 牌 

for (var i= 0;i<16;i++) { 
Var tempcard = desktop.cardlist.pop(); 
desktop.sealist.push (tempcard); 
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} 





游戏 的 第 一 个 状态 game_s_sessioninit 结束 后 ， 第 二 个 状态 是 game_s_sendcard， 调 用 


SendCard0 完 成 给 电脑 及 玩家 发 牌 任务 。 庄 家 14 张 麻将 ， 非 庄家 13 张 麻将 。 并 且 进 入 庄 














家 可 以 出 牌 的 状态 。 电 脑 是 庄家 则 进入 game_ s_com2 状态 ， 玩 家 是 庄家 则 进入 





game_s_human2 状态 : 


function Sendcard() // 给 每 位 发 初始 的 13 张 牌 


{ 
sendticks = sendticks+17 


if (sendticks == 1 || sendticks == 2 || sendticks == 3) 


EOr (MAL T= Dr A Ft 
var tempcard = desktop.cardlist.pop(); 
player.blacklist.push (tempcard); 
var tempcard = desktop.cardlist.pop(); 
computer .blacklist.push (tempcard); 
} 
mp3_getcard.play () ;// 播 放 摸 牌 声音 
} 
else if (sendticks == 4) { 
// 先 每 人 发 1 张 麻将 牌 ， 满 13 张 
var tempcard = desktop.cardlist.pop(); 
player.blacklist.push (tempcard); 
var tempcard = desktop.cardlist.pop(); 
computer.blacklist.push (tempcard); 
// 给 庄家 再 发 1 张 牌 ， 庄 家 满 14 张 牌 
if (zhuang == 1) { 
Var tempcard = desktop.cardlist.pop(); 
computer.blacklist.push (tempcard); 
1 
else if (zhuang == 2) { 
var tempcard = desktop.cardlist.pop(); 
player.blacklist.push (tempcard); 
1 
mp3 getcard.play(); 
} 
else if (sendticks == 5) { 
Sort List (player.blacklist); // 玩 家 的 麻将 牌 排序 
Sort List (computer.blacklist); // 电 脑 的 麻将 牌 排序 
if (zhuang == 1)// 庄 家 是 电脑 ， 电 脑 先 出 牌 
{ 


{// 前 3 墩 


clickpos = player.blacklist.length-1;// 默 认 最 后 1 张 作 为 出 的 牌 ， 上 移 
game s = game s com2; // 游 戏 状态 改 成 game s com2， 即 电脑 可 以 出 牌 


Mo_Cardbutton.disabled = false; // 摸 牌 按钮 可 用 
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图 片 位 置 单 击 的 处 理 : 
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以 下 是 几 个 按钮 单 击 事件 代码 : 
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function Mo Card () // 玩 家 摸 牌 按钮 事件 代码 


Var temp= desktop.cardlist.shift(); 
player.mocard = temp; 
desktop.outcount += 1; 
mp3 getcard.play(); 
if (Check Gang (player,2,temp)) // 检 查 过 路 杠 
can gang = true; 
else 
can gang = false; 
if (Check Hu (player,temp) ) // 检 查 和 牌 
can hu = true; 
else 
can hu = false; 
player.blacklist .push (temp) ; // 将 摸 的 牌 加 入 暗 牌 中 
if (Check Gang (player,1,null1))// 检 查 暗 杜 ( 自 摸 成 杠 ) 
can gang = true; 
clickpos = player.blacklist.length-1; 
game s = game s human2; 
Mo Cardbutton.disabled = true; // 摸 牌 按钮 无 效 
Out Cardbutton.disabled = false;  // 出 牌 按 钮 有 效 
Peng_Cardbutton.disabled = true;  // 碰 牌 按钮 无 效 


出 牌 按钮 事件 代码 : 


function Out Card() { 


if (clickpos >= 0 && clickpos < player.blacklist.1length) 


Player Showcard(clickpos); 


} 


mp3 getcard.play(); 
Mo Cardbutton.disabled = false; // 摸 牌 按钮 有 效 
out Cardbutton.disabled = true; // 出 牌 按钮 无 效 


function Player Showcard(pos) 


{ 


if (Check _ Session () ) // 检 查 是 否 流 局 〈 黄 庄 ? 
return; 

Var temp = player.blacklist[pos]; 

player.blacklist.splice(pos,1); 

player.outcard = temp; 

player.mocard = null; 

player.outedlist.push (temp); 

desktop.outedlist.push (temp); 

Sort List (player.blacklist);// 玩 家 手中 暗 牌 排序 


game s = game s coml; 


{ 
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} 
function Check Session( )// 检 查 是 否 流 局 ( 黄 庄 ) 
# 
if (desktop.outcount >64 ){ 
game s = game s nohu; 
return true; 
天 
lse 
return false; 
} 


碰 牌 按钮 事件 代码 : 
function Peng Card() {// 处 理 玩家 碰 牌 按钮 功能 


if( computer.outcard!=null) 
{ if( Check Peng (player,computer.outcard) ) 
{ Do Peng (player, computer.outcard) 

computer.outedlist.pop(); 
clickpos=player.blacklist.1length-1; 
game s=game s human2; 
can hu = false; 
can gang = false; 


} 

Out Cardbutton.disabled = false;// 出 牌 按钮 可 用 
Peng_Cardbutton.disabled = true; // 碰 牌 按钮 无 效 
Mo_Cardbutton.disabled = true; // 碰 牌 按钮 无 效 


} 
和 牌 按钮 事件 代码 : 
function PlayerHu_ Card() {// 处 理 玩家 和 上牌 按钮 功能 


if (game s == game s human]l) 
Hu_Card(); // 对 家 “放炮 ”和 有 牌 
if (game s == game s_ human2) 
ZiHu Card(); // 自 摸 和 牌 
Hu Cardbutton.disabled = true; // 和 牌 按钮 无 效 ， 进 入 积分 状态 
} 
// 处 理 对 家 “放炮 ”和 上牌 
function Hu Card(){ 
if (computer.outcard !=null ) 
if( Check Hul(player,computer.outcard) ) 
{ 
computer.outedlist.pop(); 
player.blacklist.push( computer.outcard); 
Sort List (player.blacklist); 
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2 和、 HTML5 网 页 游戏 设计 从 基础 到 开发 


杠 牌 按钮 事件 代码 : 


赢 牌 后 计算 分 数 ， 主 要 统计 杠 的 个 数 来 翻 倍 : 
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function Score Session(){ 
XS = 1 
if (winner.whitelist.length>0)// 有 明 牌 
{ 
Var gangcard = null; 
for( var i=0; i< winner.whitelist.length;i++ )// 统 计 杠 的 个 数 
{ 
if (gangcard == null){ 
gangcard = winner.whitelist[i]; 
if( Count Card(winner.whitelist,gangcard)== 4 ) 
gangpai ++7 
} 
if (winner.whitelist[i] .type != gangcard.type || winner.whitelist [i]. 
value! = gangcard.value) 
{ 
gangcard = winner.whitelist[i]; 
if (Count Card(winner.whitelist,gangcard)== 4) 
gangpai++; 


} 
xx5 += gangpai; 
} 
XXX = Math.pow(2,xXxs); // 计 算 倍数 
sscore = 100*XXX7 
winner.gold = winner.gold + sscore; // 赢 家 加 分 
loser.gold = loser.gold - sscore; // 输 家 减 分 
scoreticks = 0; 
game s = game s sessionend; 
} 


电脑 两 种 状态 ， 一 个 是 game_s_coml 状态 ， 电 脑 可 以 进行 磁 、 杠 、 和 上 牌 或 摸 牌 选择 。 
另 一 个 是 game_s_com2 状态 ， 电 脑 将 进行 智能 出 牌 。 
Com _Process() 首 先 处 理 电脑 磁 、 杠 、 和 牌 ， 如 果 不 能 则 自动 摸 牌 。 


function Com Process () // 电 脑 进行 碰 、 杠 、 和 牌 或 摸 牌 选择 
{ 
// 处 理 电 脑 碰 、 杠 、 和 上牌 
if( player.outcard != null ) 
{ 
if( Check Hu(computer,player.outcard) ) // 检 查 和 牌 

mp3 fangpao.play(); 
player.outedlist.pop(); 
computer.blacklist.push (player.outcard); 
Sort List (computer .blacklist) ? 
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} 
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发 





winner = computer; 
loser = player; 
game s = game s_score; // 进 入 积分 计算 状态 
return ; 
1 
else if( Check Gang (computer,3,player.outcard) ) 
// 检 查 是 否 能 杠 对 方 玩 家 出 的 牌 
{ mp3 gang.play() 
Do Gang (computer,3,player.outcard); 
player.outedlist.pop(); 
' 
else if (Check Peng (computer,player.outcard)) 
// 检 查 是 否 能 碰 对 方 玩家 出 的 牌 
{ mp3 peng.play() 
Do Peng (computer,player.outcard); 
player.outedlist.pop(); 
game_s = game s_com2;  // 电 脑 不 用 再 摸 牌 直接 进入 出 牌 状态 


return; 


} 

// 电 脑 自动 摸 牌 

Var temp=desktop.cardlist.shift(); 

mp3 getcard.play() 7 

desktop.outcount = desktop.outcount + 17 
computer .mocard=temp; 

computer .blacklist.push (temp); 

Sort List(computer.blacklist); 

game s = game s com2;// 电 脑 将 进行 智能 出 牌 


游戏 进入 game_s_com2 状态 后 ， 将 调用 Com_Showcard0 进 行 智能 出 牌 。 由 于 在 电脑 
自动 摸 牌 后 有 可 能 和 牌 、 杠 牌 ， 所 以 还 要 处 理 这 些 情况 ， 最 后 调用 前 面 介 绍 的 
Computer_outCard (computerblacklisb 智 能 计算 出 的 牌 〈 索 引 )。 


function Com Showcard() // 电 脑 摸 牌 后 的 出 牌 


{ 


if (Check Hu(computer,null) ) 
{ 
mp3 zimo.play() 
winner = computer; 
loser = player; 
game s = game s score; 
六 
else if (Check Session () ) // 检 查 是 否 黄 庄 
{ 
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} 
else if( Check Gang (computer,1,computer.mocard) ) // 检 查 是 否 有 自摸 暗 杠 
和 mp3 gang.play() 
Do Gang (computer,1,computer.mocard); 
Var temp=desktop.cardlist.shift(); 
mp3 getcard.play(); 
computer .mocard=temp; 
computer.blacklist.push (temp); 
Sort List(computer.blacklist); 
和 
else if (Check Gang (computer,2,computer.mocard) ) 
// 检 查 是 否 过 路 杜 ( 明 牌 中 的 形成 杠 》 
{ mp3 gang.play(); 
Do Gang (computer,2,computer.mocard); 
temp=desktop.cardlist.shift (); 
mp3 getcard.play(); 
computer .mocard=temp; 
computer.blacklist.push (temp); 
Sort List(computer.blacklist); 
} 
else 
{ ”var m= Computer outcard (computer.blacklist);// 智 能 计算 出 的 牌 (索引 ) 
Var ctemp = computer.blacklist[m]; 
computer .blacklist.splice (m,1); 
ctemp.play (); 
computer.outcard=ctemp; 
computer.outedlist.push (ctemp); 
desktop.outedlist.push (ctemp); 
computer.mocard=null; 


game s = game s humanl1;// 轮 到 玩家 了 ， 玩 家 可 以 碰 、 杠 或 摸 牌 


} 
以 下 就 是 检查 是 否 能 碰 ， 以 及 处 理 碰 牌 。 


function Check Peng (p, xcard) // 是 否 能 碰 牌 
{ 
if (xcard ==null ) 
return false; 
var count = 0; 
for (var i=0;i<p.blacklist.length;i++) 
if( p.blacklist[i].type == xcard.type && p.blacklist[i].value == 
xcard.value ) 
count = count +17 
if( count >=2 ) 


return true; 


\ HTML5 网 页 游戏 设计 从 基础 到 开发 


Do_Peng(p,xcard) 实 现 碰 牌 处 理 ， 将 牌 手中 与 xcard 相同 的 牌 加 入 明 牌 数组 whitelist， 
同时 从 上 暗 牌 数组 blacklist 中 删除 。 


以 下 就 是 检查 是 否 能 杠 ， 以 及 处 理 杠 牌 。Check_Gang(p,tp,xcard) 按 形成 杠 的 三 种 情况 
判断 。 
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Do_Gang(p.tp,xcard) 按 形成 杠 的 三 种 情况 分 别处 理 : 





和、HTML5 网 页 游戏 设计 从 基础 到 开发 





} 


} 
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} 
else 


break; 


Sort List (p.whitelist); // 明 有 牌 排序 


和 上牌 算法 一 一 本 游戏 重点 。 
每 50 毫秒 刷新 游戏 界面 : 


function display() 


{ 


cxt.clearRect (0,0, cxt .canvas.width, cxt .canvas.height); // 清 屏 
// 显 示 两 家 麻将 牌 


if(game s >= game s sendcard && game s <= game s score) 


{ 


//player.outedlist 
for (var i=0;i<player.outedlist.length;i++)// 玩 家 出 过 的 牌 
{ 
if (i<16) 
player.outedlist[i].draw(20 + i*80,390); 
已 LSe 
Player.outedlist[il.draw(20 + (i-16)*80,500); 
} 
//player.blacklist 
for (var i=0;i<player.blacklist.length;i++)// 玩 家 手 里 的 暗 牌 
{ 
if (game s == game s human2 && i == clickpos) 
player.blacklist[i] .draw(20 + i*80,620); 
else 
player.blacklist[i] .draw(20 + i*80,640); 
1 
//player.whitelist 
Var wxoff = Math.floor (player.blacklist.length/3) * 3 +2; 
for (var i=0;i<player.whitelist.length;i++) // 玩 家 的 明 牌 ( 碰 、 杠 过 的 牌 ) 
player.whitelist[i] .draw(60 + wxoff *80 + i*80,650); 
//computer.whitelist 
for (var i=0;i<computer.whitelist.]length;i++) 
computer.whitelist[i] .draw(20 + i*80,10); 
//computer.blacklist 
for (var i=0;i<computer.blacklist.length;i++) 
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} 





if (game s >= game s seamo && game s <= game s score) 


computer.blacklist[i] .draw( 60+ computer.whitelist.1length 


*80 + i*80 ,20); 


else 


computer.blacklist[i] .draw( 60+ computer.whitelist.1length 


*80 + i*80 ,20); 


//computer.blacklist[il] .drawbg( 60+ computer.whitelist.1length 


*80 + i*80 ,20); 
//computer.outedlist 
try 
{ 
for (var i=0;i<computer.outedlist.length;i++) 
{ 
LE(L<LGY 
computer.outedlist[i] .draw( 20+ i*80 ,140); 
else 
computer.outedlist[i] .draw( 20+ (i-16)*80 ,250); 


} 

catch (err){ 
console.1log (err); 
console.1og ("i:"+i); 
console.log("len:"+computer.outedlist.length); 

} 

if(game s>game s sendcard && game s < game s seamo ){ 
cxt.drawImage (img pengl,1100, 600); 
cxt.drawImage (img gangl,1150, 600); 
cxt.drawImage (img hul,1200,600); 


if (game s == game s humanl ) 


{ 


if(can peng) { 

cxt .drawImage (img peng, 1100, 600); 

Peng Cardbutton.disabled = false;  ”// 磁 牌 按钮 有 效 
} else 

Peng Cardbutton.disabled = true; // 碰 牌 按钮 无 效 


if(can gang) { 
cxt .drawImage (img gang, 1150, 600); 
Gang Cardbutton.disabled = false; // 杠 牌 按钮 有 效 


} else 
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Gang Cardbutton.disabled = true; // 杠 牌 按钮 无 效 


了 和 (Ca hu) { 
Cxt .drawImage (img hu, 1200, 600); 


Hu Cardbutton.disabled = false; // 和 有 牌 按钮 有 效 
else 
Hu Cardbutton.disabled = true; // 和 牌 按钮 无 效 
} 
else if( game s == game s human2) 


{ 
if (can gang ) 
{ 
cxt .drawImage (img gang, 1150, 600); 
Gang Cardbutton.disabled = false;  // 杠 牌 按钮 有 效 
} else 
Gang Cardbutton.disabled = true; // 杠 牌 按钮 无 效 
if (can hu ) 


{ 
cxt.drawImage (img hu, 1200, 600); 
Hu Cardbutton.disabled = false; // 和 有 牌 按钮 有 效 
} else 
Hu Cardbutton.disabled = true; // 和 有 牌 按钮 无 效 
} 
else if( game s == game s nohu ) 


{ 

CXt.fil1Style="#909090"7 

cxt.fillRect (350,200,700,450); 

cxt.fillstyle="#£000f0"; 

cxt.font = "180px 宋体 "; 

cxt .fillText (" 流 局 ", 400, 400); 
} 
else if (game s == game s score || game s == game s sessionend ) 
{ 

cxt .fillSstyle="#b0b0bO"; 

cxt.fillRect (350,120,700,500); 

cxt.fillSstyle="#£000f0"; 

cxt:Font =- "50px 未 体 "; 

cxt .fillSstyle="#f£0f000"; 

if (winner.id==2) 

cxt .fillText ("本 局 你 共 赢 了 "+sscore +" 金 币 " ,400,590) : 
else 
cxt .fillText ("本 局 你 输 掉 了 "+sscore +" 人 金币" ,400, 590); 

} 
if ( (game s >= game s sendcard && game s <= game s score) ) 
{ 
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cxt .fillStyle="#ffff00"; 
cxt.font = "30px Arial"™"; 
cxt.fillText ("$"+computer.gold,1250,50); 
cxt.fillText ("$"+player.gold,1250, 670); 
if (zhuang == 1 )// 上 方 电脑 是 庄家 
cxt .drawImage (img zhuang,1200,20); // 显 示 庄 家 图 片 在 上 方 电脑 处 
else if ( zhuang == 2 )// 下 方 玩家 是 庄家 
cxt .drawImage (img zhuang,1200,650); // 显 示 庄 家 图 片 在 下 方 玩家 处 


} 





<!DOCTYPE HTML> 

<html> 

<head><meta charset="UTF-8"></head> 

<body> 

<canvas id="box" onclick="Click();" width=1400px height=760px style="background- 
color:black"></canvas> 

<div> 

<input id="Mo Cardbutton" type="button" value=" 摸 牌 " onclick="Mo Card()" 
disabled="false"> 

<input id="Peng Cardbutton" type="button" value=" 磁 牌 " onclick="Peng 
Card()" disabled="false"> 

<input id="Gang Cardbutton" type="button" value=" 杠 牌 " onclick="Gang_ 
Card()" disabled="false"> 

<input id="Hu Cardbutton" type="button" value=" 和 有 牌 " onclick="PlayerHu 
Card()" disabled="false"> 

<input id="Out Cardbutton" type="button" value=" 出 牌 " onclick="out 
Card()"disabled="false"> 

<input id="Infobutton" type="button" value=" 游 戏说 明 " onclick="DoHelp()" 
disabled="true" > 

</div> 


<script src="api2.js"></script> 
<script src="main2.js"></script> 
<script type="text/javascript"> 
Var cxt; 
var cardbg img; 
var cards=[]; 
// 状 态 常量 
var game s sessioninit = 1; // 初 始 
var game s sendcard = 2; // 发 14 张 牌 
Var game s coml = 7; // 电 脑 可 以 处 理 碰 、 杠 、 和 或 摸 牌 
var game s com?2 = 8; // 电 脑 可 以 出 牌 
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var game s humanl = 9; // 玩 家 可 以 处 理 磁 、 杠 、 和 或 摸 牌 
var game s human2 = 10; // 玩 家 可 以 出 牌 

Var game s seamo = 117 

Var game s nohu = 12; // 黄 庄 

var game s sessionend = 13; 

var game s score = 14; // 和 上牌 计 分 


var game s = game s sessioninit ; // 保 存 游戏 现在 的 状态 


var btn down touch = 0; 
Var AccOk = 1; 

Var Menu Loop = true; 
Var Game Loop = true; 


var zhuang = 1;//1 电脑 是 庄家 ，2 玩家 是 庄家 

var mark=[]; 

var clsmark=[]; 

war cisct=[]> 

// 判 断 

var mk=[]; 

var jiang=07 

Var mpos=1; 

var clickpos=0; 

var outpos=0; 

// 玩 家 金币 数 、id、 暗 牌 列表 、 明 牌 列表 、 已 出 的 牌 列表 

var player = { gold: 10000, id: 2, blacklist: [], whitelist: [], outedlist: [] }; 
// 电 脑 金 币 数 、id、 暗 牌 列表 、 明 牌 列表 、 已 出 的 牌 列表 

var computer ={gold:10000,id:1,blacklist:[],whitelist:[],outedlist:[]}; 
// 桌 面 上 的 牌 

var desktop ={cardlist:[],sealist:[],outedlist:[],outcount:0}; 

var winner, loser;// 赢 家 输家 

Var XXS=07 

Var XXX=07 

Var tcls={}; 

var zipai=0; 

var gangpai=0; 

Var sscore=0; 

// 是 否 能 碰 、 杠 、 和 牌 

Var can peng = false, can gang = false, can hu = false; 

var sendticks = 0; 

var scoreticks =0; 

// 图 片 

var img hu,img hul, img peng,img pengl,img gang,img gangl,img zhuang; 
// 声 音 


Var mp3 getcard,mp3 click,mp3 peng,mp3 gang; 
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Var mp3 zimo,mp3 fangpao; 





initGame (); 
function Click(){ 
Var x = event.clientX-cxt.canvas.offsetLeft; 
var y = event.clientY-cxt.canvas.offsetTop; 
//console.1og ("x:"+x+" y:"+y); 
mouseClick (x,y); 
l 
window.setInterval ("display()",50); 
window.setInterval ("RunGame ()",500); 
</script> 
</body> 
</html> 


本 两 人 麻将 游戏 还 有 许多 地 方 需要 完善 ， 例 如 吃 牌 功能 ， 书 中 已 经 分 析 过 相应 算法 ， 
读者 可 以 进一步 去 完善 ， 游 戏 运行 界面 如 图 17-3 和 图 17-4 


二 $10000 


$10000 





图 17-3 两 人 麻将 游戏 运行 开始 界面 


十 $9600 











加 图 轩 9999 才 


图 17-4 两 人 麻将 游戏 一 局 结束 界面 
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21 点 扑 殉 牌 游戏 





轩 加 21 点 扑克 牌 游 戏 介绍 


21 点 游戏 是 玩家 要 取得 比 庄家 更 大 的 点 数 总 和 ， 但 点 数 超过 21 点 即 为 输 牌 。J、Q、 
玉 算 10 点 ，A 可算 1 点 或 11 点 ， 其 余 按 牌 面值 计 点 数 。 开 始 时 每 人 发 两 张 牌 ， 一 张 明 ， 
- 张 暗 ， 凡 点 数 不 足 21 点 ， 可 选择 继续 要 牌 。 
本 章 开发 21 点 扑克 牌 游戏 运行 界面 如 图 18-1 所 示 。 为 简化 起 见 ， 游 戏 有 两 方 ， 一 方 
为 Dealer〈 庄 家 )， 另 一 方 为 Player (玩家 )。Dealer (庄家 ) 要 牌 过 程 由 程序 自动 实现 ， 并 
能 够 判断 玩家 输赢 。 









(Se 咎 ] IA2017 书 网 \ 第 10 本 Htr 记忆 上 慑 黑 枢 ) ( 21 点 游戏 ) 
按 遇 再 发 一 张 牌 。 按 b 不 要 牌 了 。 按 n 重 新 开始 . 


loading... 


























图 18-1 21 点 扑克 牌 游戏 运行 界面 


帮 玉 设计 思路 

游戏 开始 时 ， 首 先 要 取 一 副 牌 puke， 然 后 将 牌 洗 好 。 洗 牌 时 将 交换 52 次 ， 将 原来 有 
序 的 牌 打 乱 顺序 。 开 始 新 游戏 时 首先 发 给 庄家 、 玩 家 各 两 张 牌 ， 庄 家 、 玩 家 手中 的 牌 采用 
数组 househand[] 和 playerhand[] 存 储 ， 这 样 便于 计算 庄家 、 玩 家 各 自 的 点 数 和 。 

玩家 要 牌 、 不 要 牌 、 重 新 开始 由 键盘 事件 来 实现 。 键 盘 事 件 中 区 别 用 户 的 按键 ， 按 字 
母 d 键 再 发 一 张 牌 ， 按 字母 h 键 不 要 牌 ， 按 字母 n 键 重新 开始 扑克 游戏 。 

游戏 过 程 中 ， 为 简化 起 见 ， 仅 仅 判断 庄家 《电脑 ) 牌 的 点 数 是 否 超过 17 点 ， 不 到 则 
继续 要 牌 。 























淖 
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程序 设计 的 步骤 
?18.3.1 扑克 牌 类 MCard 


21 点 游戏 中 ， 一 张 牌 要 有 5 个 属性 说 明 : num 牌 面 大 小 ，suit 牌 面 花色 ，value 点 数 ， 
dealt 代表 发 给 哪 位 牌 手 〈 未 发 是 0， 玩 家 是 1， 庄 家 是 2)，picture 是 扑克 牌 对 应 的 图 像 : 








var MCard = function (n，s，Ppic) {// 牌 类 
this.num = n; // 牌 面 大 小 ， 什 为 0,1,.….12 (代表 A,2,3,4,5,6,7,8,9,10,J,Q,K) 
if (n > 10) n = 10; //set values for J, Q, K 
this.value = n;// 点 数 
this.suit = s;// 牌 面 花 色 
this.picture = pic; 


this.dealt = 0; // 发 给 哪 位 牌 手 ， 未 发 0 玩家 1 庄家 2 


- 副 牌 类 MCard 





// 一 副 牌 类 
function Puke() {// 一 副 牌 
this.deck = []; //52 张 牌 数组 


Puke.prototype.builddeck = function () {// 构 造 一 副 牌 
Var 二 :三 和， 
for (var si = 0; si < 4; si++) { 
for (var n = 0; n < 13; n++) { 
this.deck[i] = new MCard(n + 1, suitnames[si], pics[i]); 
++? 


} 
Puke.prototype.shuffle = function () {// 洗 牌 
var i = 0; 


Var s; 

while (i < this.deck.length) { 
s = Math.floor(Math.random() * (51 + 1)); 
this.swapindeck(s, i); 


ER 


} 
Puke.prototype.swapindeck = function (j，k) {// 交 换 两 张 牌 
Var hold = this.deck[j]; //new MCard(deck[j] .num, deck[j] .suit, 
deck[j] .picture); 
this.deck[j] = this.deck[k]; 
this.deck[k] = hold; 
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} 
Puke .prototype.dealfromdeck=function (who) {// 给 玩家 或 庄家 发 牌 。 玩 家 who=1; 
庄家 who=2 
Var card; 
var ch = 0 
console.log(this.deck[ch]) 
while ((this.deck[ch] .dealt > 0)) // 找 到 还 没有 发 的 牌 
{ 
Ch++7 
if (ch == 52) // 如 果 一 副 牌 发 完 ， 立 即 重 洗 一 副 牌 
{ 





this.builddeck(); // 重 新 构造 一 副 牌 
this.shuffle(); 
ch= 0; 


} 

this.deck[ch] .dealt = who; // 发 给 who 
card = this.deck[ch]; 

return card; // 返 回 这 张 牌 





<html> 

<head> 

<title> 黑 桃 J 了 (21 点 游戏 ) </title> 

<meta http-equiv="Content-Type" content="text/html"/> 


<script> 

var cwidth = 800;var cheight = 600; 
Var cardw = 75;var cardh = 107; 

var playerxp = 20;// 玩 家 的 第 一 张 牌 的 x 坐标 
var playeryp = 120; 

var housexp = 20;// 庄 家 的 第 一 张 牌 的 x 坐标 
Var houseyp = 10; 

var housetotal;// 庄 家 手中 牌 的 点 数 和 

var playertotal;// 玩 家 手中 牌 的 点 数 和 

Var pi = 0;var hi = 0; 

var puke; 

var playerhand = [];// 玩 家 手中 牌 

var househand = [];// 庄 家 手中 牌 

var pics = []; 

new Image () ;// 背 面 Image 
back.src = "55.jpg"// 牌 的 背面 


将 所 有 扑克 牌 图 片 加 载 到 pics 数组 中 : 


Var back 
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suitnames = ["clubs", "hearts", "spades", "diamonds"]; 

nums = [ran, “2, 3, Am, 5m, "6n, "In, "gn, "om, "10, wij", "gq", "k"] 
’ ’ ’ 区 ’ ’ ’ ’ ’ ’ 

// 缓 存 图 像 到 pics [i] 

var i = 07 

for (var si = 0; si < 4; si++) { 


} 


Efor (var n=°0° 


suitnames[si] + "-" + nums[n] + "-75.png"; 


Ne 3% nr) 


picname = 


pics[i] = new Image(); 


pics[i].src = picname; 


了 ++7 


游戏 界面 加 载 时 执行 init0， 初 始 化 一 副 牌 puke， 并 且 完 成 洗 牌 和 发 最 初 的 四 张 牌 : 


function init() { 


性 document .getElementById('canvas') .getContext ('"2d")7 
ctx.font="italic 20pt Georgia"; 

ctx.fillstyle "blue"; 
puke new Puke(); 
puke.builddeck(); 


canvasl 


// 构 造 一 副 牌 


document .getElementById('canvas'); 


window.addEventListener('keydown', getkey, false); 


puke.shuffle(); // 洗 牌 
newgame (); 
| 
function newgame () {// 开 始 新 游戏 
ctx.clearRect (0，0，cwidth，cheight);// 清 屏 
pi= 0; 
hi = 0; 


} 


playerxp = 20; 
housexp = 20; 


dealstart (); // 发 最 初 的 四 张 牌 


function dealstart() {// 发 四 张 牌 


playerhand[pi] = puke.dealfromdeck (1); // 第 一 张 发 给 玩家 

ctx.drawImage (playerhand [pi] .picture,playerxp,playeryp, cardw, cardh); 
playerxp = playerxp+30; 

Pi++7 

househand[hi] = puke.dealfromdeck(2) ; // 第 二 张 发 给 庄家 

ctx.drawImage (back, housexp, houseyp, cardw, cardh) ; // 画 背面 

housexp = housexp+20; 

hi++7 

playerhand[pi] = puke-dealfromdeck(1); // 第 三 张 发 给 玩家 

ctx.drawImage (playerhand [pi] .picture,playerxp,playeryp, cardw, cardh); 
playerxp = playerzxp+30; 
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Pi++7 

househand[hi] = puke.dealfromdeck (2); // 第 四 张 发 给 庄家 
ctx.drawImage (househand[hi] .picture,housexp,houseyp,cardw, cardh) 
housexp = housexp+20; 

了 i++ 


} 


getkey(event) 获 取 用 户 按键 信息 ， 根 据 不 同 字 和 母 键 分 别处 理 : 


function getkey (event) {// 获 取 按 键 
Var keyCode; 
if (event == null) { 
keyCode = window.event.keyCode; 
window.event .preventDefault (); 
} 
else { 
keyCode = event .keyCode; 
event .preventDefault (); 
} 
switch (keyCode) { 
case 68: // 按 了 d， 玩 家 再 要 一 张 牌 
deal (); 
break; 
case 72: // 按 了 h， 玩 家 不 要 牌 了 
playerdone () 7 
break; 
case 78: // 按 了 n， 开 始 新 的 游戏 
newgame (); 
break; 
default: // 按 了 其 他 


alert ("Press d, h, or n."); 


deal() 实现 玩家 再 要 一 张 牌 的 功能 ， 注 意 也 要 同时 发 给 庄 
17 点 可 以 要 牌 )。 





一 张 牌 〈 如 果 庄 家 没有 满 


function deal () {// 玩 家 再 要 一 张 
playerhand[pi] = puke.dealfromdeck (1); 
ctx.drawImage (playerhand [pi] .picture,playerxp,playeryp, cardw, cardh); 
playerxp = playerxp+30; 
Pi++7 
if (more to _house ()) {// 同 时 发 给 庄家 一 张 牌 
househand[hi] = puke.dealfromdeck (2); 


ctx.drawImage (househand [hi] .picture,housexp,houseyp, cardw, cardh); 
housexp = housexp+20; 


和 HTML5 网 页 游戏 设计 从 基础 到 开发 


more to house0 计 算 庄家 手中 的 牌 的 点 数 和 是 否 小 于 17。 


同 理 add_up_player0 计 算 玩家 手中 的 点 数 : 


playerdone0) 是 玩家 按 了 h 键 后 不 要 牌 了 ， 此 时 需 庄家 电脑) 智能 要 牌 ， 可 以 根据 手 
中 的 牌 ， 只 要 小 于 17， 庄 家 就 不 停 地 要 牌 。 最 后 显示 庄家 的 所 有 牌 并 比较 总 点 数 ， 判 断 出 
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function playerdone () {// 玩 家 按 了 h 键 ， 不 要 牌 了 
while (more to _house () ) {// 只 要 庄家 手中 的 点 数 小 于 17， 庄 家 就 不 停 地 要 牌 
househand[hi] = puke.dealfromdeck (2); 
ctx.drawImage (back, housexp, houseyp, cardw, cardh); 
housexp = housexp + 20; 
hitt+; 
} 
showhouse () ; // 显 示 庄 家 的 所 有 牌 
playertotal = add up _player(); // 玩 家 的 总 点 数 
if (playertotal > 21) { 
if (housetotal > 21) 
ctx.fillText ("你 们 都 胀 死 了 ."，30，250); 
else 
ctx.fillText ("你 胀 死 了 ."，30，250); 
} 
else 
if (housetotal > 21) 
ctx.fillTezxt ("你 赢 了 ， 庄 家 胀 死 了 ."，30，250); 
Slse 
if (playertotal >= housetotal) 
if (playertotal > housetotal) 
ctx.fillText ("你 赢 了 . "，30，250); 
else 
Ex rials T0250 
else 
if (housetotal <= 21) 
ctx.fillText ("你 输 了 . "，30，250); 
else 
ctzx.filltext ("你 赢 了 ， 因 为 庄家 胀 死 了 ."，30，250); 
} 


showhouse() 显 示 庄 家 手中 所 有 的 牌 : 


function showhouse() { 
MAT i 
housexp= 20; 
for (i=0;i<hi;i++) { 
ctx.drawImage (househand[i] .picture,housexp, houseyp, cardw, cardh); 


housexp = housexp+20; 


| 

</script></head> 

<body onLoad="init ();"> 

<header> 按 <b>d</b> 键 再 发 一 张 牌 。 按 <b>h</b> 不 要 牌 了 。 按 <b>n</b> 重 新 开始 。</header> 
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<p id="pl">loading...</p> 

<canvas id="canvas" width="800" height="500"> 
你 的 浏览 器 不 支持 canvas 画布 
</canvas></body></html> 


游戏 运行 输赢 判断 结果 如 图 18-2 所 示 。 

LA 
© 图 司 NA2017 书 符合 10 本 Htr DD ~ 
按键 再 发 一 张 牌 。 按 h 不 要 牌 了 。 按 o 重 新 开始 。 


loading. 











4 
Mad 




















图 18-2 21 点 扑克 牌 输赢 结果 
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基于 lufylegend 游戏 引擎 开发 





lufylegend 是 一 款 开 源 的 HTML5 游戏 引擎 ， 它 实现 了 利用 仿 Flash ActionScript 3.0 的 
语法 进行 HTMLS5 的 开发 , 包含 了 LSprite、 LBitmapData、 LBitmap、LLoader、 LURLLoader、 
LTextField、LEvent 等 多 个 Flash ActionScript 开发 人 员 熟 悉 的 类 ， 支 持 Google Chrome、 
Firefox、Opera、IE9、iOS、Android 等 多 种 热门 环境 。 利 用 lufylegend 可 以 轻松 地 使 用 面 
向 对 象 编程 ， 并 且 可 以 配合 Box2dWeb 制作 物理 游戏 ， 另 外 它 还 内 置 了 LIweenLite 组 动 类 
等 非常 实用 的 功能 ， 本 章 使 用 它 更 快 更 高 效 地 开发 HIMLS 游戏 。 


轩 加 lufylegend 游戏 引擎 介绍 


lufylegend 是 一 个 兼容 性 极 高 ， 功 能 极 多 ， 使 用 方便 的 HTMLS5 游戏 引擎 。lufylegend 
引擎 官方 主页 网 址 为 http://lufylegend.com/lufylegend。lufylegend 的 API 文档 是 中 文 的 ， 
lufylegend 引擎 中 文 API 文档 网 址 为 http://lufylegend.com/lufylegend/api。 


?19.1.1 游戏 引擎 原 理 


lufylegend 库 件 封装 了 Canvas 绘 给 图 的 所 有 9 API, ， 它 利用 JavaScript 的 setInterval 函数 ， 
对 Canvas 画板 进行 周期 性 重 绘 。 每 次 对 Canvas 画板 进行 重 绘 的 时 候 , 首先 要 使 用 clearRect 
方法 清空 整个 画板 ， 然 后 再 调用 需要 进行 重 绘 的 各 个 API 函数 ， 这 样 就 可 达到 重新 绘制 所 
有 图 形 的 目的 。 
我 们 知道 游戏 主要 由 事件 和 画面 组 成 ， 在 lufylegend 的 事件 中 ， 有 鼠标 事件 
(MOUSE_DOWN, MOUSE_UP, MOUSE_MOVE), 键盘 事件 (KEY_DOWN, KEY_UP)， 
时 间 轴 事件 (ENTER_FRAME)， 这 些 事 件 中 ， 前 两 项 好 理解 ， 但 时 间 轴 事件 对 于 一 些 刚 
接触 游戏 开发 的 人 而 言 ， 有 些 摸 不 着 头脑 。 其 实时 间 轴 事件 相当 于 一 个 定时 器 ， 这 个 事件 
的 监听 者 (istener， 也 就 是 事件 回调 函数 ) 每 隔 一 段 时 间 就 会 触发 一 次 。 但 这 个 东西 有 什 
么 用 呢 ? 我 们 举 个 例子 吧 ， 假 如 我 们 做 一 个 飞机 大 战 的 游戏 ， 要 让 敌 机 组 组 地 移动 起 来 ， 
如 果 我 们 直接 将 它们 的 x 或 者 y 设置 为 某 值 ， 那 飞机 就 会 吓 的 一 声 瞬间 移动 到 那里 。 这 样 
很 不 “合理 ”， 因 为 动作 太 大 了 ,我 们 要 做 到 缓 缓 地 移动 ， 这 时 候 时 间 轴 事件 就 该 派 上 用 场 
了 ， 我 们 可 以 在 监听 函数 中 给 飞机 的 x 或 者 y 增加 某 个 值 ， 这 样 的 话 ， 监 听 函 数 每 被 调用 
一 次 ， 就 会 将 飞机 移动 一 下 ， 又 因为 每 阳 一 段 时 间 监 听 函 数 才 被 调用 一 次 ， 所 以 说 飞机 就 
能 够 达到 慢 慢 移 动 的 效果 ， 这 样 就 “合理 ”友好 多 了 。 

当然 ， 要 让 飞机 移动 得 更 形象 一 点 ， 就 要 用 到 缓 动 类 LTweenLite， 什 么 是 缓 动 类 ? 就 
是 像 jQuery 淡 入 淡出 那 种 逐渐 变化 从 而 实现 某 种 效果 的 一 个 功能 。 

说 完事 件 ， 我 们 再 来 说 说 画面 。lufylegend 中 ， 但 凡是 加 入 到 画面 上 的 显示 对 象 都 是 
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通过 一 个 setInverval 不 停 绘 制 的 ， 这 样 做 有 什么 必要 呢 ? 首 先 ， 是 可 以 实现 层次 化 ， 如 果 
我 们 把 所 有 对 和 象 放 入 一 个 数组 中 ， 通 过 遍历 的 方式 获取 每 个 对 象 并 调用 函数 将 其 显示 ， 那 
么 第 一 个 被 加 入 的 对 和 象 就 会 先 被 画 在 最 下 面 ， 其 余 的 依次 画 上 ， 这 样 一 来 就 实现 了 层次 化 
效果 。 其 次 ， 还 有 个 好 处 就 是 可 以 通过 直接 更 改 对 象 的 属性 从 而 在 下 次 重 绘 时 表现 出 来 ， 
比如 说 我 们 加 入 一 个 图 片 对 象 (对 象 名 字 为 img), 这 时 我 们 要 改变 它 的 显示 方式 为 不 显示 
(visible 属性 改 为 false), 那么 直接 把 img.visible 改 为 false 即 可 , 那 在 下 次 重 绘 时 就 控制 它 
不 显示 。 另 外 ， 在 上 面 提 到 的 时 间 轴 事件 触发 的 速度 也 是 由 重 画 速度 决定 的 一 一 每 画 一 次 
就 调用 一 次 。 

在 lufylegend 中 ,但 凡是 可 显示 的 对 象 ,大 都 继承 自 LDisplayObject。 这 个 类 有 个 11 show 
方法 ， 用 于 在 循环 泻 染 时 变换 画布 ， 绘 制 该 显示 的 东西 。 
人 

既然 是 使 用 引擎 ， 首 先 就 要 配置 引擎 的 开发 环境 ，lufylegend 的 使 用 极其 方便 ， 只 需 
将 lufylegend-x.x.x.min.js 文件 (lufylegend 引擎 官方 主页 下 载 ) 引入 即 可 ， 默 认 将 legend 
文件 夹 放 入 当前 文件 路 径 中 ， 如 下 所 示 : 

<!DOCTYPE html> 

<html > 

<head> 

<meta charset="utf-8" /> 


<title>LTileMap</title> 
<script type="text/Javascript" src="lufylegend-1.9.7.min.js"></script> 


此 时 即 可 使 用 mufylegend 开始 我 们 的 游戏 之 旅 
让 
在 引擎 中 ， 要 初始 化 游戏 需要 用 到 引擎 内 部 的 init 函数 ， 使 用 方法 举例 如 下 ; 


init (50, "mylegend", 800, 480,main) 


这 个 函数 的 参数 是 : 















































init (speed, divid,width,height, completeFunc); 


speed: 游戏 速度 〈 即 刷新 频率 )， 也 就 是 多 久 对 屏幕 刷新 一 次 。 

divid: 传 入 一 个 div 的 id，lufylegend 进行 初始 化 的 时 候 ， 会 自动 将 canvas 加 入 到 此 
div 内 部 。 

width: 游戏 界面 宽 。 

height: 游戏 界面 高 。 

completeFunc: 游戏 初始 化 后 调用 此 函数 。 

在 使 用 lufylegend 时 ， 不 用 在 HTML 文件 中 写 <canvas> 标 签 ， 要 创建 一 个 div， 使 用 
init 函数 进行 初始 化 工作 ， 如 下 所 示 : 


<!DOCTYPE html> 
<html> 
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<head> 
<meta charset="UTF-8"> 
<title>demo</title> 
</head> 
<body> 
<div id="mylegend">loading...</div> 
<script type="text/javascript" src="lufylegend-1.9.7.min.js"></script> 
<script> 
init (50, "mylegend", 800,480,main); 
function main(){ 

alert ("感谢 您 使 用 lufylegend 库 件 ") ; 
} 
</script> 
</body> 
</html> 


值得 一 提 的 是 init 的 参数 speed, 或 许 读者 不 理解 什么 是 游戏 速度 ， 其实 就 是 在 原理 中 
介绍 到 的 setInterval 的 速度 ， 这 个 速度 控制 的 是 重 绘 速度 和 时 间 轴 触发 速度 ， 如 果 设 得 超 
大 ， 画 面 就 会 很 卡 ， 不 管 是 双核 CPU 还 是 四 核 CPU。 所 以 一 般 设置 为 30 一 50。 


lufylegend 游戏 引擎 基本 功能 


“19.2.1 图片 的 加 载 与 显示 .ee 
使 用 lufylegend 库 件 显示 图 片 时 ， 可 分 为 以 下 儿 个 步 又 : 
(1) 使 用 LLoader 类 加 载 图 片 数据 。 
(2) 将 读 取 完 的 图 片 数 据 保存 到 LBitmapData 中 。 
(3) 利用 LBitmap 将 图 片 显示 到 画板 上 。 
可 以 看 到 ， 用 lufylegend 库 件 显示 图 片 ， 主 要 用 到 LBitmapData 和 LBitmap 对 象 。 这 
两 个 类 一 个 是 负责 提供 数据 ， 一 个 负责 按 数 据 要 求 显示 。 图 片 加 载 与 显示 的 例子 如 下 : 
<!DOCTYPE HTML> 


<html> 
<head> 











<meta charset="utf-8" /> 
<script type="text/javascript" src="../lufylegend-1.7.6.min.js"></script> 
</head> 
<body> 
<div id="mylegend">loading...</div> 
<script type="text/javascript"> 
Var loader; 
init (50, "mylegend", 500,350,main); 


function main(){ 
loader = new LLoader(); 
loader.addEventListener (LEvent .COMPLETE, loadBitmapdata); 
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loader.1load("test.jpg", "bitmapData"); 
} 
function loadBitmapdata (event){ 
var bitmapdata = new LBitmapData (loader.content); 
var bitmap = new LBitmap (bitmapdata); 
addchild (bitmap); // 加 入 到 显示 列表 中 


var bitmapdata2 = new LBitmapData("#FF0000", 0，0，100，100);# 红 色 方 块 
var bitmap2 = new LBitmap (bitmapdata2); 


bitmap2.x = 200; # 设 置 x 坐标 位 置 
addchild (bitmap2); // 加 入 到 显示 列表 中 

} 

</script> 

</body> 

</html> 


效果 如 图 19-1 所 示 。 在 人 物 图 案 上 方 (200，0) 处 有 一 红色 方块 。 





图 19-1 图 片 的 加 载 与 显示 效果 


图 片 读 取 完成 后 会 调用 loadBitmapdata 函数 , 而 此 时 的 loader.content 就 是 一 个 Image。 
上 面 的 代码 会 新 建 一 个 LBitmapData 对 象 ， 并 将 已 读 取 完 的 Image 作为 参数 传 给 新 建 的 
LBitmapData 对 象 。LBitmapData 是 lufylegend 库 件 中 的 一 个 类 ， 它 只 是 用 来 保存 和 读 取 
Image 对 象 的 ， 如 果 要 将 图 片 显示 到 Canvas 画板 上 ， 则 需要 用 到 LBitmap 。 来 看 下 面 的 
代码 : 

var bitmap = new LBitmap (bitmapdata); 

adqdchild (bitmap); 


这 里 新 建 了 一 个 LBitmap 对 象 ， 并 将 上 面 新 建 的 LBitmapData 对 象 作为 参数 传 给 了 新 
建 的 LBitmap 对 象 。LBitmap 的 功能 是 将 Image 对 象 显示 到 Canvas 画板 上 。addChild 函数 
是 将 对 象 添加 到 Canvas 画板 上 ， 被 addChild0 函 数 添加 的 对 象 会 按照 先后 顺序 依次 显示 出 
来 。 最 后 加 入 的 对 象 会 显示 在 最 项 部 。 
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1. LBitmapData 对 象 

创建 一 个 具有 指定 的 宽度 和 高 度 的 LBitmapData 对 象 。 

使 用 LBitmapData 类 , 可 以 处 理 LBitmap 对 和 象 的 数据 (像素 )。 可 以 使 用 LBitmapData 
类 的 方法 创建 任意 大 小 的 Image 对 象 ， 并 在 运行 时 采用 多 种 方式 操作 这 些 图 像 ， 也 可 以 访 
问 使 用 LLoader 类 加 载 的 Image 对 象 。 

LBitmapData ( image, x, y, width, height, dataType ) 

image Image: 一 个 Image 对 象 。 

x: Image 可 视 范 围 x 坐标 (该 参数 可 省 略 )。 

y: Image 可 视 范围 y 坐标 (该 参数 可 省 略 )。 

width: Image 可 视 范 围 宽 〈 该 参数 可 省 略 )。 

height: Image 可 视 范 围 高 〈 该 参数 可 省 略 )。 

dataType: 指定 数据 格式 ， 可 以 使 用 LBitmapData.DATA IMAGE (Image 对 象 ) 和 
LBitmapData.DATA_CANVAS (Canvas 对 象 ) (该 参数 可 省 略 )。 

















function loadBitmapdata (event) { 
Var bitmapdata = new LBitmapData (loader.content,0,200,424,150); 
var bitmap = new LBitmap (bitmapdata); 
addchild (bitmap); // 加 入 到 显示 列表 中 

} 


效果 如 图 19-2 所 示 ， 仅 仅 显示 人 物 下 半 部 分 。 
Vw 国 / 





图 19-2 参数 控制 图 片 的 显示 效果 


2. LBitmap 对 象 

再 来 看 LBitmap 对 象 , LBitmap 不 但 能 将 图 片 显示 到 Canvas 画板 上 ,还 可 以 控制 图 片 
的 各 种 属性 ， 如 坐标 (x,y)、 透 明度 (alpha)、 旋 转 (rotate)、 纵 放 (scaleX, scaleY) 等 。 在 下 面 的 
代码 中 ， 则 设置 了 图 片 的 旋转 和 透明 度 ， 效 果 如 图 19-3 所 示 。 


<script type="text/javascript"> 
var loader; 
init (50, "mylegend", 500,350,main); 
function main(){ 
loader = new LLoader (); 
loader .addEventListener (LEvent .COMPLETE, loadBitmapdata); 
loader.1load ("test.jpg", "bitmapData"); 
} 
function loadBitmapdata (event){ 
Var bitmapdata = new LBitmapData (loader.content); 


316 


HTML5 网 页 游戏 设计 从 基础 到 开发 


Var bitmap = new LBitmap (bitmapdata); 
// 图 片 坐标 
bitmap.x = 50; 
bitmap.y = 50; 
bitmap.rotate = 60; // 图 片 旋转 60 度 
pitmap.alpha = 0.4;  // 图 片 透明 度 设置 为 0.4 
addchild(bitmap);  ”// 加 入 到 显示 列表 中 
} 
</script> 





图 19-3 ”控制 图 片 的 旋转 和 透明 度 


3. addChild()/removeChild() 加 入 对 象 / 移 除 对 象 函 数 

在 lufylegend 中 要 加 入 显示 对 象 到 屏幕 上 , 需要 使 用 addChild0,， 如 果 直 接 调用 这 个 函 
数 ， 就 是 把 对 象 加 入 最 底层 ， 当 然 LSprite 也 有 addChild0， 是 把 显示 对 象 添加 到 LSprite 
上 ， 从 而 实现 图 层 层次 化 效果 。 

removeChild 是 一 样 的 ， 只 不 过 是 把 对 象 删除 而 已 。 原 理 为 把 参数 所 指定 的 图 形 对 象 从 
LSprite 的 childList 里 面 删除 。 

addchild(bitmap) 7 // 加 入 到 显示 列表 中 

上 例 中 addChild0 等 同 于 LGlobal.stage.addChild()。 
19.22 图 层 

既然 是 游戏 ， 那 么 图 层 就 必 不 可 少 。 在 游戏 的 世界 里 ， 我 们 可 以 看 到 各 种 地 图 及 各 种 
游戏 人 物 ， 还 能 看 到 人 物 在 地 图 上 行走 、 对 话 等 。 无 论 是 地 图 还 是 人 物 ， 其 实 都 是 图 片 的 
图 像 处 理 与 显示 的 结果 ， 让 不 同 的 图 像 按 照 先 后 顺序 显示 到 屏幕 上 ， 我 们 就 会 看 到 不 同 的 
游戏 界面 。 也 就 是 说 ， 这 些 图 像 显 示 的 先后 顺序 以 及 位 置 决 定 了 游戏 的 界面 。 


全 


图 19-4 图 层 的 示意 
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图 19-4 中 ，A、B、C 三 个 图 层 ， 它 们 分 别 出 现 在 游戏 界面 上 的 时 候 ， 我 们 首先 看 到 
的 是 最 上 层 的 LayerC 层 和 LayerB 层 ， 最 后 看 到 的 是 LayerA 层 。 

lufylegend 实现 了 层 的 概念 ， 它 就 是 LSprite 对 象 。 它 的 用 法 很 简单 : 

// 加 入 层 LSprite 


Var layer = new LSprite(); 
addchild (layer); 


LSprite 图 层 有 addChild0 和 removeChild() 方 法 , 用 于 向 图 层 中 添加 对 象 。 此 外 , LSprite 
还 有 addEventListenerO 函 数 ， 用 于 给 对 象 加 入 事件 ， 具 体 的 一 些 功能 可 以 到 官方 API 去 
查看 : 

function loadBitmapdata (event){ 

var bitmapdata = new LBitmapData (loader.content); 




















var bitmap = new LBitmap (bitmapdata); 
// 加 入 层 LSprite 
Var layerl = new LSprite(); 
adqdchild(layerl1) // 加 入 到 显示 列表 中 
layerl.addchild (bitmap); // 加 入 layerl 层 中 
} 


LSprite 对 象 和 LBitmap 对 象 一 样 ， 也 有 坐标 (x,yY)、 透 明度 (alpha)、 旋 转 (rotate)、 缩 放 
(scaleX, scaleY) 等 属性 ， 不 过 它 控制 的 是 整个 层 的 属性 。 


layerl.x = 50; 
layerl.y = 50; 


layerl.rotate = 60; 









该 后 ,由 于 地 图 过 大 , 地 图 
行 移动 ， 人 物 则 相对 静止 不 动 ， 这 个 就 是 卷轴 。 说 白 了 就 是 镜头 跟随 主角 的 效果 ， 我 们 就 
利用 lufylegendjjs 游戏 引擎 图 层 来 实现 这 个 效果 。 

其 实 实现 这 个 效果 的 关键 在 于 如 何 使 人 物 静止 ， 何 时 移动 地 图 ， 以 及 如 何 移动 地 图 。 
在 探究 这 两 个 问题 之 前 ， 我 们 先 创建 一 个 结构 良好 的 舞台 层 〈 一 个 LSprite 对 象 )， 以 便 以 
后 的 操作 。 舞 台 结构 如 下 : 

+- 舞台 层 

| 





+- 地 图 层 
| 
+- 人 物 层 
可 见 舞 台 层 就 是 地 图 层 和 人 物 层 的 父 元 素 ， 并 且 人 物 层 在 地 图 层 上 方 ， 毕 竟 人 物 是 站 
在 地 图 上 的 。 我 们 知道 ， 子 对 象 的 坐标 是 相对 于 父 对 象 的 ， 所 以 移动 父 对 象 ， 子 对 象 会 跟 
着 移动 ， 这 点 要 先 弄 明白 。 
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如 何 使 人 物 静止 呢 ? 何 时 移动 地 图 呢 ? 如 何 移动 地 图 呢 ? 也 许 你 会 想 ， 首 先 用 
fxxx){.….} 来 判断 人 物 的 坐标 是 否 达 到 屏幕 中 央 ，, 如 果 是 ， 则 移动 地 图 对 象 ， 如 果 不 是 则 移 
动人 物 对 象 ， 这 么 做 的 话 就 麻烦 了 ， 其 实 有 更 简单 的 方法 : 卷轴 /不 卷轴 时 ， 我 们 的 人 物 都 
是 在 移动 ， 但 是 如 果 人 物 达 到 屏幕 中 央 时 ， 要 开始 卷轴 了 ， 我 们 的 舞台 层 就 进行 与 人 物 速 
度 方向 相反 、 速 度 相 同 的 移动 ， 那 么 人 物 相对 于 canvas 画布 的 位 移 就 抵消 了 ， 看 上 去 就 是 
静止 的 ， 而 地 图 就 跟着 父 类 向 反方 向 移动 。 这 个 类 似 于 拍 古装 电影 ， 拍 两 个 人 一 边 骑马 一 
边 谈话 。 如 果 人 和 马 在 前 进 ， 摄 像 机 以 相同 的 速度 跟 拍 ， 那 么 得 到 的 画面 就 是 人 物 并 没有 
移动 ， 而 人 物 背 后 的 风景 是 在 移动 的 。 

接 下 来 看 实现 代码 。 其 中 关于 事件 处 理 见 19.2.8 节 。 


init (30, "mydemo", 700, 480, main); 
var direction = null;// 移 动 方 向 null 代表 没 移动 
var bird，stageLayer，bg;// 小 鸟 ， 舞 台 层 ， 背 景 对 象 
var step = 5;// 每 次 移动 的 长 度 
function main () { 
// 资 源 列表 
var loadList = [ 
tname = "bird", path "w/bird :png"is 
{name : "bg", path : "./bg.jpg"} 
]; 
// 加 载 资源 
LLoadManage.1load(loadList, null, demoInit); 
} 
function demoInit (result) { 
// 初 始 化 舞台 层 
stageLayer = new LSprite () 
addchild (stageLayer); 
// 加 入 背景 
bg = new LBitmap (new LBitmapData(result["bg"])); 
bg.y = -100; 
stageLayer.addchild (bg); 
// 加 入 小 鸟 
bird = new LBitmap (new LBitmapData(result["bird"])); 
bird.x = 100; 
bird.y = 150; 
stageLayer.addChild (bird); 
// 添 加 鼠标 按 下 事件 
stageLayer.addEventListener (LMouseEvent .MOUSE DOWN, onDown); 
// 添 加 鼠标 弹 起 事件 
stageLayer.addEventListener (LMouseEvent .MOUSE UP, onUp); 
// 添 加 时 间 轴 事件 


stageLayer.addEventListener (LEvent .ENTER FRAME, onFrame); 
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图 19-5 ”实现 游戏 中 的 卷轴 


在 图 19-5 中 ， 单 击 屏幕 左 半边 控制 小 鸟 向 左 移动 ， 单 击 右 半边 屏幕 ， 控 制 小 鸟 向 右 移 
动 。 小 鸟 到 达 屏 幕 中 央 后 ， 开 始 卷轴 。 
。 人 A 


LGraphics 是 lufylegend 库 中 的 一 个 绘图 
独 使 用 ， 也 可 以 与 LSprite 对 象 配合 使 用 。 

1 绘制 矩形 

利用 LGraphics 对 象 中 的 drawRect 函数 来 绘制 矩形 ， 代 码 如 下 : 















函数 以 简化 绘图 。 它 可 以 单 





<script type="text/javascript"> 
init (50, "mylegend", 500,350,main); 
function main(){ 
Var graphics = new LGraphics(); 
addchild (graphics); 
graphics.drawRect (1, '#000000"', [50,50,100,100]); // 室 心 矩形 
graphics.drawRect (1, '#000000', [170, 50,100,100] ,true, '#cccccc' ) 7V/ 填 充 矩 形 
} 
</script> 


2. 绘制 圆 
利用 LGraphics 对 象 中 的 drawArc 函数 来 绘制 圆 ， 其 代码 如 下 所 示 : 


<script type="text/javascript"> 

init (50, "mylegend", 500,350,main); 

function main(){ 
Var graphics = new LGraphics(); 
addchild (graphics); 
graphics.drawArc(1, '#000000', [60,60,50,0,360*Math.PI/180]); 
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graphics.drawArc (1, "#000000', [180, 60, 50, 0, 360*#*Math.PI/180] ,true, '#cccccc'); 
} 
</script> 


效果 如 图 19-6 所 示 。 





图 19-6 绘制 圆 形 


3. 绘制 多 边 形 
LGraphics 对 象 除了 可 以 画 矩 形 和 圆 之 外 ， 还 可 以 使 用 其 中 的 drawVertices 函数 ， 根 据 
坐标 项 点 数组 来 绘制 图 形 ， 代 码 如 下 所 示 : 


<script type="text/javascript"> 
init (50, "mylegend", 500, 350,main); 
function main(){ 
Var graphics = new LGraphics(); 
addchild (graphics); 
graphics .drawVertices (1, '#000000', [[50,20], [80,20], [100, 50], [80, 80], 
[50,80], [30,50]]); 
graphics.drawVertices (1, '#000000', [[150, 20], [180,20], [200, 50], [180, 80], 
ELSOnacla ll30 53501 Eris "4Eccccco 
} 
</script> 


效果 如 图 19-7 所 示 。 





图 19-7 绘制 多 边 形 


4. 绘制 位 图 图 片 
使 用 LGraphics 对 象 也 可 以 直接 绘制 位 图 图 片 ， 主 要 是 使 用 LGraphics 对 象 的 
beginBitmapFill ( bitmap ) 函 数 用 位 图 图 像 填 充 绘图 区 ， 下 面 看 看 这 个 函数 的 强大 功能 : 


<script type="text/javascript"> 
Var loader; 
init (50, "mylegend", 800, 480, main); 


function main () { 
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loader = new LLoader (); 
loader.addEventListener (LEvent .COMPLETE, loadBitmapdata); 
loader.1load ("face.jpg", "bitmapData"); 

} 

function loadBitmapdata (event) { 

Var bitmapdata = new LBitmapData (loader.content); 
Var backLayer; 
backLayer = new LSprite(); 
addCchild (backLayer); 
backLayer.graphics.beginBitmapFill (bitmapdata); 
backLayer.graphics.drawArc (1, "#000000", [150, 50, 50,0,Math.PI*2]); 
// 绘 制 圆 形 区 域 
backLayer = new LSprite(); 
addChild (backLayer); 
backLayer.graphics.beginBitmapFill (bitmapdata); 
backLayer.graphics.drawRect (1, "#000000", [10,100,70,100]); 
// 绘 制 窍 形 区 域 
backLayer = new LSprite(); 
addchild (backLayer); 
backLayer.graphics.beginBitmapFill (bitmapdata); 
backLayer .graphics.drawVertices (1,"#000000", [[120,100], [100,200], 
[200,150]]);// 绘 制 多 边 形 区 域 

}</script> 


效果 如 图 19-8 所 示 。 从 图 19-8 可 见 用 位 图 图 像 填充 绘制 的 圆 形 、 矩 形 和 多 边 形 区 域 。 





图 19-8 位 图 图 像 填 充 绘图 区 


5. 使 用 LSprite 对 象 进行 绘图 

前 面 介绍 了 独立 使 用 LGraphics 对 象 来 绘图 的 方法 。 由 于 每 个 LSprite 对 象 都 包含 一 个 
LGraphics 对 象 ， 所 以 上 面 的 绘图 都 可 以 使 用 LSprite 对 象 中 的 graphics 来 实现 。 比 如 画 矩 
形 的 代码 也 可 以 写成 如 下 代码 : 

<script type="text/javascript"> 

init (50, "mylegend", 500,350,main); 


function main(){ 
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Var layer 1= new LSprite(); 

addchild (layerl1); 

layerl.graphics.drawRect (1, '#000000"', [50, 50,100,100]); 

layerl .graphics.drawRect (1, '#000000"', [170, 50, 100,100], true, '#cccccc'); 
} 
</script> 





?19.2.5 ”使 用 LTextField 显示 文字 


这 个 LIextField 实例 和 LBitmap 一 样 ， 需 要 调用 父 LSprite 对 象 的 addChild() 或 
addChildAt() 方法 将 LIextField 实例 添加 到 显示 列表 〈 加 入 到 界面 ) 中 。 这 个 类 的 属性 很 
多 ， 读 者 可 以 到 API 中 去 查看 ， 具 体 使 用 举例 如 下 : 


init (20, "mylegend", 500, 400,main); 
var backLayer,title; 





function main(){ 
backLayer = new LSprite(); 
addChild (backLayer); 
title = new LTextField(); 
title.size = 30; 
title.color = "#ff0000"; 
title.text = "文字 显示 测试 "; 
backLayer.addchild (title); 
} 


LTextField 还 可 以 将 文本 变 为 一 个 输入 框 ， 只 需要 将 文本 的 texttype 属性 设置 为 
xFieldType.INPUT 即 可 。 


可 使 用 LTextField 对 象 的 setType 函数 ， 设 置 texttype 属性 LIextFieldType.INPUT。 代 
码 如 下 所 示 : 


title = new LTextField() 
title. setType (LTextFieldType. INPUT) ; 






这 个 类 f 戏 中 许多 全 局 的 设置 ， 比 如 说 更 改 游戏 速度 ,获取 游戏 界面 
canvas 标签 ，canvas 标签 的 getContext("2d")， 以 及 当前 操作 系统 等 。 

在 LGlobal 中 ， 有 以 下 属性 : 

。 LGlobal.backgroundColor 属性 : 设置 游戏 画面 的 背景 颜色 。 

。 LGlobal.canvas 属性 : 获取 context 对 象 。 

。 LGlobal.stage 属性 : 一 个 LSprite 对 象 ， 所 有 的 DisplayObject 对 象 的 最 底层 。 

。 LGlobal.stageScale 属性 : 指定 要 使 用 哪 种 缩放 模式 。HTMLS5 最 大 的 优势 就 是 跨 平 
台 ， 所 以 游戏 最 好 要 能 在 手机 上 运行 ， 还 要 能 达到 全 屏 。Lufylegend 不 仅 能 在 PC、 
手机 全 屏 运 行 ， 还 提供 了 三 种 全 屏 模式 : 
多 LStageScaleMode EXACT FIT: 指定 整个 应 用 程序 在 指定 区 域 中 可 见 ， 但 不 尝 
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试 保持 原始 高 宽 比 。 
多 LStageScaleMode.SHOW_ALL: 指定 整个 应 用 程序 在 指定 区 域 中 可 见 ， 且 不 会 
发 生 扭 曲 ， 同 时 保持 应 用 程序 的 原始 高 宽 比 。 
多 LStageScaleMode.NO SCALE: 指定 应 用 程序 的 大 小 是 固定 的 ， 因 此 ， 即 使 在 
更 改 播 放 器 窗口 大 小 时 ， 它 仍然 保持 不 变 。 
设置 完 钴 台 的 缩放 模式 之 后 ,调用 LSystem.screen(LStage.FULL SCREEN); 就 可 以 实现 
全 屏 。 它 的 原理 很 简单 ， 就 是 设置 canvas 标签 的 style.width 和 style.height 来 实现 缩放 。 




















? 19.2.7 LLoadManage 加 载 文 件 








要 


LLoadManage 类 主要 用 于 加 载 游戏 中 
用 到 服务 器 )， 用 法 可 查 API 文档 ， 示 例如 下 : 


Var loadData = [ 


{path: 
{path: 
{name: 
{name: 
{name: 
{name: 
{name: 
{name: 
{name: 


]; 


"js/JSfile0l. jes" type "je ys 

"s/sfile02 js"ytype:”"je"]s 
"vimg0",path:"./images/img0.png"}, 
"imgl",path:"./images/imgl.png"}, 
"myFont",path:"NotoSans.eot, NotoSans.ttf",type:"font"}, 
"text01",path:"./files/text01.txt",type:"text"}, 
"text02",path:"./files/text02.txt",type:"text"}, 
"sound01",path:"./sounds/sound0]1 .wav",type:"sound"}, 
"sound02",path:"./sounds/sound02.wav",type:"sound"} 


var loadingLayer; 


var datalist=[]; 


function main(){ 


loadingLayer = new LoadingSsamplel (); 
addchild (loadingLayer); 
LLoadManage.load( 

loadData, 

function (progress){ 


Pe 


loadingLayer.setProgress (progress); 


gameInit 


i 
} 


function gameInit (result) { 


datalist = result; 


removeChild (loadingLayer); 


loadingLayer = null; 


//do something 


Var bitmapData = new LBitmapData (datalist["img0"]); 
Var txt = datalist["text01"]; 


Var sound = new LSound () 7 
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sound.1load(datalist["sound01"]); 
sound.play(); 
} 


? 19.2.8 事件 处 理 


lufylegend 库 里 有 各 种 事件 ， 使 用 addEventListener 可 以 为 各 种 

1. 鼠标 事件 

鼠标 事件 分 为 鼠标 按 下 (LMouseEventMOUSE DOWN)、 和 鼠标 弹 起 (LMouseEvent. 
MOUSEUP) 和 鼠标 移动 LMouseEventMOUSE MOVE) 三 个 事件 。 





加 侦 听 。 








件 


<div id="mylegend">loading...</div> 
<script type="text/javascript"> 
init (50, "mylegend", 300,300,main); 
var field; 
function main(){ 
Var layer = new LSprite(); 
layer.graphics.drawRect (1,'#cccccc', [0,0,300,300],true, '#cccccc'); 
addchild (layer); 
field = new LTextField(); 
field.text = "Wait Click!"; 
layer.addchild (field); 
layer.addEventListener (LMouseEvent .MOUSE_DOWN, downshow) ; // 侦 听 和 鼠标 按 下 事件 
layer.addEventListener (LMouseEvent .MOUSE_UP, upshow); // 侦 听 鼠 标 弹 起 事件 
} 


function downshow (event){ // 处 理 鼠标 按 下 
field.text = "Mouse Down!"; 

} 

function upshow (event){ // 处 理 鼠 标 弹 起 


field.text = "Mouse Up!"; 
</script> 


以 上 两 个 函数 downshow(event) 和 upshow(event) 分 别 用 来 处 理 鼠标 按 下 和 鼠标 弹 起 事 
件 ， 当 鼠标 按 下 的 时 候 field 文本 的 显示 值 为 “Mouse Down!”， 当 鼠标 弹 起 的 时 候 field 文 
本 的 显示 值 为 “Mouse Up!”。 

2. 时 间 轴 事件 (ENTER_FRAME) 

如 果 想 重复 执行 某 段 代码 ， 那 么 就 需要 用 到 时 间 轴 事件 (或 者 称 帧 频 事件 )。 时 间 轴 
事件 就 是 指 按照 指定 间隔 时 间 不 断 重复 地 广播 某 事件 ， 有 的 地 方 解 释 为 以 帧 频 不 断 触 发 事 
件 。 只 要 给 某 一 对 象 添 加 此 事件 侦 听 ， 就 可 以 达到 循环 重复 的 目的 。 例 如 实现 矩形 图 形 左 
右 往复 来 回 移动 的 代码 如 下 : 

<!DOCTYPE html> 


<html> 
<head> 
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<meta charset="utf-8"> 
<title> 帧 频 事 什 </title> 
<script src="lufylegend.js-lufylegend-1.9.7/lufylegend-1.9.7.min.js"></script> 


<script> 


/Vinit 初始 化 画布 ， 第 一 个 参数 为 帧 速率 ， 它 的 值 越 大 动画 速率 越 快 


init (1000/60, 
var 


"legend", 800, 480, main); 
direction = 1; 


function main () { 


var layer = new LSprite(); // 新 建 层 

addchild (layer); // 添 加 层 

// 在 层 上 绘制 一 个 矩形 

//LGraphics 类 包含 一 组 可 用 来 创建 矢量 形状 的 方法 

//drawRect 五 个 参数 : 线 粗 、 线 颜色 、 坐 标 及 宽度 、 是 否 填 充 、 填 充 颜色 
layer.graphics.drawRect (1, "#ff0000", [0, 0, 100, 100], true, 
"#880088"); 

//layer 上 绑 定 ENTER_FRAME 事件 ， 以 帧 速率 调用 onframe 函数 
layer.addEventListener (LEvent .ENTER FRAME, onframe); 


function onframe (event){ 


</script> 
</head> 
<body> 


var layer = event.currentTarget; 

// 每 一 帧 ， 横 坐标 增长 /减少 即 向 右 / 向 左 移动 一 像素 ， 方 向 取决 于 direction 
的 正 负 

layer.x += direction; 

if(layer.x < 0){ 


direction = 1; // 右 移 

1 

if(layer.x > 700){ // 坐 标 大 于 700 后 ， 向 左 移 
direction = -1; // 左 移 


<div id="legend"></div> 


</body> 
</html> 


3. 键盘 事件 





lufylegend 库 里 用 LKeyboardEventKEY _ DOWN 、LKeyboardEventKEY UP LKeyboard 
EventKEY _ PRESS 来 侦 听 键盘 事件 。 由 于 键盘 事件 需要 加 载 到 window (浏览 器 窗口 ) 上， 


所 以 加 载 的 时 候 与 前 

















面 讲述 的 方法 会 稍微 有 些 变化 ， 有 具体 做 法 看 示例 代码 。 


<div id="mylegend">loading...</div> 


<script type="text/javascript"> 
init (50, "mylegend", 300,300,main); 
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var field; 
function main(){ 
var layer = new LSprite(); 
layer.graphics.drawRect (1,'#cccccc', [0,0,300,300],true, '#cccccc'); 
addchild (layer); 
field = new LTextField(); 
field.text = "Wait Click!"; 
layer.addchild (field); 
LEvent .addEventListener (LGlobal .window, LKeyboardEvent .KEY DOWN,down); 


// 侦 听 按 下 键 
LEvent .addEventListener (LGlobal .window, LKeyboardEvent .KEY UP,up) 
// 侦 听 弹 起 键 

} 

function down (event){ // 处 理 按 下 键 


field.text = event.keyCode + " Down!"; 

} 

function up(event){ // 处 理 弹 起 键 
field.text = event.keyCode + " Up!"; 

} 

</script> 


与 前 面 讲述 的 方法 不 同 的 是 , 这 里 是 使 用 LEvent.addEventListener 来 加 载 键盘 事件 的 ， 


其 中 的 LGlobal.window 就 是 er 2 象 。 所 以 键盘 事件 是 加 载 到 window 对 象 上 的 ， 这 
样 就 能 使 听 整个 浏览 器 窗口 。 






3 单 的 动画 为 人 物 的 行 : 
每 幅 图 是 一 帧 〈frame) 的 话 ， 一 帧 帧 地 切换 ， 看 起 来 就 是 动画 。 可 以 说 ， 动 画 ied 
本 的 组 成 部 分 。 在 lufylegend 库 中 利用 LAnimation 类 和 时 间 轴 帧 频 事 件 ， 可 以 很 轻松 地 
现 一 组 动画 的 播放 ， 这 里 将 以 一 个 人 向 4 个 方向 行走 的 动画 为 例 。 

图 19-9 就 是 人 物 走动 的 所 有 图 片 ， 图 可 以 分 成 4 行 4 列 ， 共 16 个 小 图 片 。 每 个 小 图 
片 代表 人 物 的 一 个 动作 。 如 果 把 这 些小 图 片 每 一 行 的 4 个 小 图 片 顺序 播放 ， 那 么 就 会 形成 
ee Noitegn 类 实际 上 就 是 利用 这 些小 图 片 不 同 的 坐标 位 置 ， 并 让 这 些小 图 片 逐 


宣 军 宇 宇 
pro 
军 归 里 里 
信人 4 


图 19-9 人 物 走动 的 图 片 chara.png 
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LAnimation 类 构造 函数 如 下 : 
LAnimation ( layer, data, list ) 


参数 : layer 为 一 个 LSprite 对 象 。 

data 为 一 个 LBitmapData 对 象 ， 即 包含 一 组 或 多 组 frame 的 精灵 图 表 ， 或 者 是 一 个 
LBitmapData 对 象 的 数组 。 

list 是 每 个 帧 〈frame) 坐标 的 数组 ， 数 组 元 素 格式 为 {x : 0, y : 0, width : 100, height : 
100, }。x、y、width、height 分 别 对 应 LBitmapData 对 象 的 属性 值 。 

如 果 精 灵图 片 中 的 每 个 frame 大 小 都 是 一 样 的 ， 可 以 使 用 LGlobal.divideCoordinate() 
函数 来 直接 对 图 片 进行 分 割 ， 生 成 每 个 帧 (frame〉 的 坐标 。 


divideCoordinate ( width, height, row, col ) 

divideCoordinate0 将 传 入 图 片 的 宽 和 高 ， 按 照 行 数 和 列 数 进 行 拆 分 计算 ， 会 得 到 一 个 
坐标 信息 的 二 维 数组 。 图 19-9 的 图 片 是 宽 和 高 为 256 像素 ， 进 行 拆 分 的 代码 如 下 : 

var list = LIGlobal.dividecoordinate(256,256,4,4) ; ， // 生 成 坐标 位 置 的 二 维 数 组 


list 是 [Array(4), Array(4), Array(4), Array(4)]， 每 个 元 素 中 的 坐标 是 对 应 每 个 帧 〈 小 图 
片 ) 在 图 19-9 中 的 坐标 值 。 具 体内 容 如 下 : 

[{x: 0, y: 0, width: 64. height: 64}, {x: 64, y: 0, width: 64. height: 64}, {x: 128, y: 0, width: 
64, height: 64}, {x: 192, y: 0, width: 64, height: 64}] 

[{x: 0, y: 64, width: 64, height: 64}, {x: 64, y:64, width: 64, height: 64}, {x: 128, y: 64, 
width: 64, height: 64}, {x: 192,y: 64, width: 64, height: 64}] 

[{x: 0, y:128, width: 64, height: 64}, {x: 64,y: 128, width: 64, height: 64}, {x: 128, y:128, 
width: 64, height: 64}, {x: 192, y: 128, width: 64, height: 64}] 

[{x: 0, y:192, width: 64, height: 64}, {x: 64,y: 192, width: 64, height: 64}, {x: 128, y:192, 
width: 64, height: 64}, {x: 192, Y: 192, width: 64, height: 64}] 

下 面 代码 实现 让 女孩 走 起 来 : 


<!DOCTYPE HTML> 
<html> 
<head> 
<meta charset="utf-8" /> 
<script type="text/javascript" src="lufylegend-1.9.7.min.js"></script> 
</head> 
<body> 
<div id="mylegend">loading...</div> 
<script type="text/javascript"> 
Var loader,anime, layer; 
init (200, "mylegend", 500,350,main); 
function main(){ 
loader = new LLoader (); 
loader.addEventListener (LEvent .COMPLETE, loadBitmapdata); 
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loader .load("chara-png"，"bitmapData") 7 
} 
function loadBitmapdata (event){ 
Var bitmapdata = new LBitmapData (loader.content,0,0,64,64); 
// 显 示范 围 (0, 0, 64, 64) 
var list = LGlobal.divideCoordinate (256,256, 4, 4); // 生 成 坐标 位 置 的 二 维 数组 
// 加 入 层 LSprite 
layer = new LSprite(); 
addchild (layer); 
anime = new LAnimation (layer,bitmapdata, list); 
layer.addEventListener (LEvent .ENTER FRAME,onframe); // 侦 听 时 间 轴 事件 


} 
function onframe (){ // 时 间 轴 事件 处 理 函 数 
anime.onframe (); // 调 用 LAnimation 类 的 onframe() 函数 ， 播 放下 一 帧 


} 

</script> 

</body> 

</html> 

在 时 间 轴 事件 处 理 函数 onframe() 中 ， 调 用 LAnimation 的 onframe0) 函 数 播放 下 一 帧 ， 
由 于 时 间 轴 事件 是 重复 调用 ， 所 以 就 有 了 动画 效果 。 

运行 效果 如 图 19-10 所 示 。 画 面 上 的 人 物 已 经 动 起 来 了 ， 实 际 上 就 是 将 图 19-9 中 的 第 

- 行 小 图 片 逐 个 循环 播放 起 来 。 


图 19-10 人 物 走动 


LAnimation 类 的 onframe() 函 数 的 功能 是 将 所 播放 图 片 的 列 号 加 1, 如 果 循 环 onframe() 
函数 ， 就 变 成 了 动画 。 但 是 目前 只 是 实现 了 第 一 行 图 片 的 循环 播放 ， 如 果 要 实现 所 有 图 片 
的 循环 播放 ， 则 需要 用 到 LAnimation 类 的 setAction() 函 数 。 其 函数 原型 如 下 所 示 : 


setAction (rowLndex, colIndex) 


参数 :rowIndex 数组 行 号 ,colIndex 数组 列 号 。 使 用 setAction0) 函 数 可 以 改变 LAnimation 
类 所 播放 图 片 的 行 号 和 列 号 ， 如 果 只 需要 改变 播放 的 行 号 ， 那 么 第 二 个 参数 可 以 省 略 。 下 
面 代 码 说 明了 setAction0) 函 数 的 详细 用 法 。 


<!DOCTYPE HTML> 

<html> 

<head> 

<meta charset="utf-8" /> 

<script type="text/javascript" src="lufylegend-1.9.7.min.js"></script> 
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</head> 
<body> 
<div id="mylegend">loading...</div> 
<script type="text/javascript"> 
var loader,anime, layer; 
init (200, "mylegend", 500,350,main); 
function main(){ 
loader = new LLoader (); 
loader .addEventListener (LEvent .COMPLETE, loadBitmapdata); 
loader.1lo0ad("chara.png", "bitmapData"); 
} 
function loadBitmapdata (event){ 
Var bitmapdata = new LBitmapData (loader.content,0,0,64,64); 
var list = LGlobal.divideCoordinate(256,256,4,4); 
// 加 入 层 ISprite 
layer = new LSprite(); 
addchild (layer); 
anime = new LAnimation (layer,bitmapdata, list); 
layer.addEventListener (LEvent .ENTER FRAME,onframe); 
} 
function onframe (){ 
var action = anime.getAction();  // 获 取 当 前 播放 的 帧 
colIndex) 





列 号 属性 (rowIndex, 


switch(action[0]){ 
case 0: Vly 
layer.y += 5; 
if(layer.y >= 200){ 
anime.setAction (2); 
} 
break; 
case 1: // 左 
layer.x -= 57 
if(layer.x <= 0){ 
anime.setAction (0); 
} 
break; 
case 2: // 右 
layer.x += 57 
if(layer.x >= 200){ 
anime.setAction (3); 
} 
break; 
case 3: cE 
layer.y -= 5; 
if(layer.y <= 0){ 
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anime.setAction (1); 


} 
break; 
} 
anime.onframe (); // 播 放下 一 帧 
</script> 
</body> 
</html> 


可 以 看 到 画面 上 的 人 物 已 经 开始 绕 着 4 个 方向 走动 起 来 了 。 
使 用 LAnimation 类 的 getAction 函数 取得 anime 对 象 当 前 所 播放 动画 的 行 号 和 列 号 ， 
其 返回 值 为 数组 类 型 [ 行 号 ， 列 号 ]。 代 码 如 下 : 
Var action=anime .getRction (); 
旦 序 中 利用 switch 对 当前 所 播放 动画 的 行 号 进行 了 区 别处 理 ， [0,1,2,3] 这 4 个 行 号 在 
图 19-9 中 分 别 代表 下 、 左 、 右 、 上 4 个 方向 ， 然 后 在 4 个 方向 上 改变 坐标 值 进 行 相应 的 移 
动 ， 并 且 根 据 所 移动 到 达 的 位 置 来 改变 移动 的 方向 。 


区 同 lufylegend 游戏 引擎 案例 一 一 接 水 果 游戏 


既然 是 游戏 ， 那 么 图 层 就 必 不 可 少 ， 对 于 本 游戏 来 说 分 成 地 图 层 一 一 也 就 是 载 入 背景 
图 的 图 层 ， 人 物 层 一 一 也 就 是 载 入 人 物 的 图 层 ， 物 品 层 一 一 也 就 是 载 入 掉 落 的 水 果 、 砖 块 
的 图 层 ， 游 戏 结束 层 一 一 也 就 是 游戏 结束 时 所 调用 的 图 层 。 先 定义 这 4 个 图 层 ， 定 义 的 代 
人 码 如 下 : 








var backLayer,playerLayer, itemLayer,overLayer;// 定 义 4 个 图 层 


定义 好 之 后 就 需要 在 gameInit(result) 函 数 中 于 初始 化 过 程 中 将 图 层 全 部 载 入 ， 男 外 需 
要 注意 的 是 图 层 的 顺序 ， 地 图 层 要 在 最 下 面 ， 否 则 会 遮 住 其 他 图 层 ， 而 导致 其 他 图 层 出 现 
显示 不 出 的 情况 ， 在 lufylegend 中 是 根据 图 层 加 入 的 顺序 来 决定 谁 在 最 下 方 ， 也 就 是 先 加 
入 的 就 是 最 下 面 的 图 层 ， 之 后 以 此 类 推 。 

imgData 提供 所 需要 的 图 片 ， 游 戏 中 加 入 3 个 事件 侦 听 ， 鼠 标的 MOUSE_DOWN 和 
MOUSE UP， 以 及 时 间 轴 事件 〈 起 到 循环 作用 ) 来 完成 游戏 的 逻辑 。 鼠 标 按 下 时 根据 在 屏 
幕 左 侧 还 是 右 侧 来 决定 人 物 的 移动 方向 ， 鼠 标 释放 则 播放 人 物 正 面 的 动画 。 

<!DOCTYPE html> 


<html lang="en"> 
<head> 





<meta charset="utf-8" /> 
<title> 接 水 果 游 戏 </title> 
<script type="text/javascript" src="/js/lufylegend-1.9.7.min.js"></script> 
<script type="text/javascript"> 
if(LGlobal.canTouch){ // 如 果 是 触 屏 
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IGlobal.stageScale = LStageScaleMode .EXRACT FIT; 
LSystem.screen (LStage.FULL SCREEN) 7 // 设 置 全 屏 
} 
</script> 
</head> 
<body style="margin:0px Opx Opx Opx;"> 
<div id="legend"></div> 
<script> 
init (50,"legend", 800,450,main); 
var imgData = [ 
{name:"back",path:"./images/back.jpg"}, 
{name:"player",path:"./images/player.png"}, 
{name:"item0",path:"./images/item0 .png"}, 
{name 






teml",path:"./images/iteml .png"}, 
{name:"item2",path:"./images/item2.png"}, 
{name:"item3",path:"./images/item3.png"}, 


{name:"item4",path:"./images/item4.png"}, 





{name:"item5",path:"./images/item5.png"}, 
{name:"item6",path:"./images/item6.png"}, 
{name:"item7",path:"./images/item7.png"} 

Ts 

var imglist; 

var backLayer,playerLayer, itemLayer,overLayer;// 定 义 4 个 图 层 


var hero; // 人 物 

var step=50,stepindex=0; // 控 制 添加 (水果 、 砖 块 等 ) 频率 
Var point = 0,pointTxt; // 初 始 化 分 数 

var hp = 1,hpTxt; // 初 始 化 生命 〈 血 ) 数 


function main(){ 
LLoadManage .load (imgData, null, gameInit); 
} 


function gameInit (result){ // 定 义 4 个 图 层 
imglist = result; 
backLayer = new LSprite(); // 地 图 层 
addchild(backLayer) 7 
addBackGround () ; // 加 入 背景 图 片 
addPlayer (); // 添 加 入 物 图 层 
itemLayer= new LSprite (); // 物 品 图 层 
backLayer.addchild (itemLayer); 
addText (); // 添 加 文字 
overLayer = new LSprite(); // 游 戏 结束 层 


backLayer .addchild (overLayer); 

Var fps = new EPS() 2 

addchild (fps); 

addEvent (); // 加 入 事件 侦 听 
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function addText (){ 
hpTxt = new LTextField(); // 生 命 ( 血 ) 数 文字 
hpTxt .color = "#ff0000"; 
hpTxt .size = 30; 
hpTxt.x = 10; 
hpTxt.y = 10; 
backLayer.addchild (hpTxt); // 加 入 到 地 图 层 
pointTxt = new LTextField(); // 分 数 文字 
pointTxt .color = "#ffffff"; 
pointTxt.size = 30; 
pointTxt.x = 10; 
pointTxt.y = 50; 
backLayer.addCchild (pointTxt);  // 加 入 到 地 图 层 
showText (); 
1 
function showText (){ // 显 示 生 命 数 和 分 数 
hpTxt .text = hp; 
pointTxt.text = point; 
function addPlayer(){ // 添 加 入 物 图 层 
playerLayer = new LSprite(); 
backLayer.addChild (playerLayer); 
hero = new Player(); 
hero.x = hero.y = 350; 
playerLayer.addchild (hero); 
function addBackGround () { // 加 入 背景 图 片 
var bitmap=new LBitmap (new LBitmapData (imglist{["back"])); 
backLayer.addchild (bitmap); 
} 
function addEvent () { // 加 入 事件 侦 听 
backLayer.addEventListener (LEvent .ENTER FRAME,onframe); 
backLayer .addEventListener (LMouseEvent .MOUSE DOWN, onDown); 
backLayer.addEventListener (LMouseEvent .MOUSE UP, onUp); 
和 


游戏 的 运行 需要 通过 这 个 刷新 来 实现 游戏 的 动画 效果 ， 所 以 需要 编写 基于 屏幕 刷新 事 
件 而 运行 的 函数 ， 因 为 是 基于 事件 运行 的 函数 ， 所 以 就 需要 添加 对 屏幕 刷新 事件 〈 时 间 轴 
事件 ) 的 侦 听 : 

backLayer .addEventListener (LEvent. ENTER FRAME, onframe); 

第 一 个 参数 为 事件 名 ， 第 二 个 参数 是 在 事件 发 生 时 所 调用 的 函数 名 ， 在 这 里 的 函数 为 
onframe， 可 以 看 出 在 onframe() 函 数 中 ， 需 要 对 几 个 信息 进行 刷新 ， 一 个 是 分 数 ， 一 个 是 
生命 数 ， 一 个 是 对 物品 〈 水 果 、 砖 块 等 ) 定时 添加 和 位 置 的 刷新 ， 物 品 〈 水 果 、 砖 块 等 ) 











I 














发 
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死亡 后 将 其 移出 画面 ， 以 及 游戏 失败 判断 这 些 操作 ， 所 以 onframe 函数 就 需要 这 样 写 。 


function onframe (){ 
hero.run(); // 人 物 行走 动画 
for (var i=0;i<itemLayer.childList.length;i++){ // 让 水 果 动 起 来 
itemLayer.childList[i] .run(); 
if(itemLayer.childList [i] .mode=="die") { // 当 水 果 移 出 屏幕 或 是 碰撞 时 
itemLayer.removeChild (itemLayer.childList[i]);// 移 除 该 成 员 


} 
if(stepindex++ > step)t{ 
stepindex = 0; 


addItem(); // 添 加 物品 〈 水 果 、 砖 块 等 
showText () 7 // 刷 新 分 数 和 生命 数 
a // 生 命 数 小 于 0 


gameOver (); 
return; 


} 
以 下 是 游戏 结束 处 理 和 添加 物品 (水 果 、 砖 块 等 ): 


function gameOver(){ // 游 戏 结束 处 理 
backLayer.die(); 
itemLayer.removeAllCchild(); 
Var txt = new LTextField(); 
txt.color = "#f£ff0000"; 
txt.size = 507 
txt.text = "GAME OVER"7 
txt.x = (LGlobal.width - txt.getWidth())*0.57 
txtsy = 1002 
overLayer.addchild (txt); 
backLayer.addEventListener (LMouseEvent .MOUSE DOWN, 
function (event){ 
backLayer.die(); 
overLayer.removeAllchild(); 
hp = 10; 
point = 0; 
addEvent (); 
1D); 
} 
function addItem(){ // 添 加 物品 (水 果 、 砖 块 等 ) 
var item=new Item(); 
item.x = 20 + Math.floor (Math.random()*(LGlobal.width - 50));// 随 机 位 置 
itemLayer.addChild (item); 
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鼠标 按 下 和 释放 事件 处 理 : 


function onDown (event){ // 鼠 标 按 下 事件 处 理 
if(event.selfX < LGlobal.width * 0.5){ 
// 鼠 标 位 置 是 否 在 画面 左 侧 


hero.mode = "left"; 

hero.anime.setAction (1); // 左 移动 画 
}else{ 

hero.mode = "right"; 

hero.anime.setAction (2); // 右 移动 画 


} 


function onUp (event){ // 鼠 标 释放 事件 处 理 
hero.mode = ""; 
hero.anime.setAction (0); // 正 面 的 动画 


| 
以 下 设计 人 物 类 ， 实 现 人 物 的 左右 移动 : 


function Player(){ // 人 物 类 
base (this, LSprite, []) 7 
var self = this; 
self.mode = ""; 
var list = LGlobal.divideCoordinate (256, 256, 4,4); 
var data new LBitmapData (imglist["player"],0,0,64,64); 
self.anime = new LAnimation (self,data,1ist); 
self.step = 2,self.stepindex = 0; 


} 
Player.prototype.run = function (){ 
var self = this; 
if(self.stepindex++ > self.step){ 
self.stepindex = 0; 
self.anime.onframe(); // 播 放下 一 帧 
} 


if(self.mode == "left"){ 
if(self.x > 10)self.x -= 10; 
}else if(self.mode == "right"){ 


if(self.x < LGlobal.width - self.getWidth())self.x += 10; 


} 
以 下 设计 物品 类 : 


function Item(){ // 物 品类 
base (this,LSprite, []); 
var self = this; 
self.mode=""; 
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var index = Math.floor (Math.random()*8); 
self.value = index < 4 ? 1:-1; // 物 品 价值 

Var bitmap = new LBitmap (new LBitmapData (imglist 
["item"+index])); 

self.addchild (bitmap); 


发 





3 
Item.prototype.run=function(){ 
var self=this; 
self.y 14= 57 /Vy 坐标 增加 实现 下 落 
var hit = self.checkHit (); // 碰 撞 检 测 
if(hit 11 self.y > LGlobal .height){// 如 果 与 人 物 碰 撞 或 者 
落 到 画面 底部 
self .mode="die"; // 设 置 mode 


} 
Item.prototype.checkHit=function(){ 
var self=this; 
if (LGlobal.hitTestArc (self, hero) ) {// 人 物 和 物品 的 碰撞 检测 
if(self.value >0){ 


point += 1; // 加 1 分 
}else{ 
hp -= 1; // 生 命 数 减 1 


} 
return true; 

} 

return false; 

有 
</script> 
</body> 
</html> 


运行 时 水 果 等 物品 不 断 下 落 ， 如 果 主 人 公 接 住 则 得 1 分 ， 如 果 接 住 非 水 果 则 生命 数 减 
1， 如 果 生 命 数 为 0 则 游戏 失败 ， 效 果 如 图 19-11 所 示 。 





图 19-11 接 水 果 游 戏 效果 
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在 lufylegend 游戏 引擎 演示 案例 网 站 https://github.com/lufylegend/lufylegend.js/tree/ 
master/examples/demo 中 列 出 了 三 十 多 个 lufylegend 游戏 引擎 开发 的 游戏 ,例如 近 点 推 箱子 、 
RGP 游戏 、 数 独 、 对 对 碰 、 俄 罗斯 方块 、 愤 怒 的 小 鸟 等 ， 如 图 19-12 所 示 。 读 者 可 以 阅读 
源码 来 进一步 学 习 lufylegend 游戏 引擎 的 使 用 。 


: 





ZLDhrdrc 
WR 


图 19-12 lufylegend 游戏 引擎 演示 案例 


参考 文献 


Reference 





[H 李 雯 ， 李 洪 发 . HTML5 程序 设计 基础 教程 [M]. 北京 人民 邮电 出 版 社 ，2013. 

[2] 姚 敦 红 ， 杨 凌 ， 张 志 美 ， 等 .jQuery 程序 设计 基础 教程 [M]. 北京 : 人 民 邮 电 出 版 社 ，2013. 
[3] 岳 学 军 . JavaScript 前 端 开发 实用 技术 教程 [M]. 北京 : 人 民 邮 电 出 版 社 ，2014. 

[4] 阮 文江 . JavaScript 程序 设计 基础 教程 [M]. 2 版 . 北京 : 人 民 邮 电 出 版 社 ，2015. 

[5] 张 路 斌 . HTML5 Canvas 游戏 开发 实战 [M]. 北京 : 机 械 工 业 出 版 社 ，2013. 

[6] 郑 秋 生 ， 夏 敏捷 . Java 游戏 编程 开发 教程 [M]. 北京 : 清华 大 学 出 版 社 ，2016. 











感谢 您 一 直 以 来 对 清华 版 图 书 的 支持 和 爱护 。 为 了 配合 本 书 的 使 用 ,本 书 
提供 配套 的 资源 ,有 需求 的 读者 请 扫描 下 方 的 “ 书 圈 " 微 信 公 众 号 二 维 码 , 在 图 
书 专区 下 载 ,也 可 以 拨打 电话 或 发 送 电子 邮件 咨询 。 

如 果 您 在 使 用 本 书 的 过 程 中 遇 到 了 什么 问题 ,或 者 有 相关 图 书 出 版 计划 ， 
也 请 您 发 邮件 告诉 我 们 ,以 便 我 们 更 好 地 为 您 服务 。 




































































我 们 的 联系 方式 : 
地 址 : 北京 海淀 区 双 清 路 学 研 大 厦 A 座 707 


资源 ER a 申请 


邮 编 : 100084 
电 话 : 010 一 62770175 一 4604 


资源 下 载 : http://www. tup. com. cn 





电子 邮件 : weijj@tup. tsinghua. edu. cn 
QQ: 883604( 请 写 明 您 的 单位 和 姓名 ) 
用 微 信 扫 一 扫 右 边 的 二 维 码 , 即 可 关注 清华 大 学 出 版 社 公 众 号 “ 书 圈 ”。 


